Jump to content
  • 0

Выравнивание относительно центра


baz1k
 Share

Question

Дано:

картинка (w=300;h=300)

ссылки, расположенные вокруг картинки (поверх картинки).

Надо:

свертать страницу так, чтобы картинка была посередине окна (при любой ширине и высоте окна), и чтобы ссылки были жестко привязаны к данной картинке (при изменении размеров окна не съезжали относительно заданной картинки).

Заранее спасибо.

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

хыы... когда то подобной фигней страдал... решение нашел но потом понял что лучше без этого обойдусь))) кстати, решение где то на этом форуме должно быть :D

а то что картинка и ссылки вместе должны быть это легко, просто делаешь все это в одну таблицу и все...

Link to comment
Share on other sites

  • 0

можно сделать таблицей чтобы картинка была по центру экрана по ширине и высоте, и дивом "привязать" ссылки к картинке :D

<table width="100%" height="100%" align="center">
<tr><td align="center">
<table>
<tr>
<td>
<div style="width:300px;">
Ссылка! Еще ссылка! и еще ...
<img src="pic.jpg" width="300" height="300" border="1">
</div>
</td>
</tr>
</table>
</td></tr>
</table>

Link to comment
Share on other sites

  • 0

то что я предложил надо доделать... это не конечное решение...

ну если Вам по барабану на трафик пользователя... то можно все делать на таблицах...

только дело в том что тут используется один тег, а при использовании таблицы около 7 тегов

а то что он уходит за пределы браузера - так и должно быть...

или вы думаете что контент должен иметь приоритет на размером окна браузера??? ))))

Link to comment
Share on other sites

  • 0

то что Вы написали (код выше) вообще не работает... т.е. было необходимо чтобы по центру все это располагалось. а у вас это далеко не центр..... а про то что контент уходит за пределы брузера.. а Вы считаете это нормально???) его даже скроллингом не достать....... он вообще куда то далеко вверх уползает....

на счет трафика... тут вы конечно правы :D Я считаю что если можно сделать красивый и правильный (чтобы все работало как надо) на дивах, то лучше делать дивами... а если с дивами работает коряво, то лучше использовать таблицы =)

Link to comment
Share on other sites

  • 0

Согласен с Джином.

Код klierik`а работает не правильно и доделывает его бесполезно. Все решается с помощью таблицы.

Код Джин`а работает, хоть и занимает больше трафика. Но страница, на которой надо разместить этот код будет мало информации.

Так что для меня все ясно.

Link to comment
Share on other sites

  • 0
Данную проблему можно легко решить с помощью блочной верстки. Достаточно хорошенько поискать: http://cssing.org.ua/2005/07/14/vertical-align-middle/ и http://cssing.org.ua/2007/04/26/another ? gn-method/.
решение нашел но потом понял что лучше без этого обойдусь)))

конечно МОЖНО решить с помощью блочной верстки. но там такие извращения.....))

Link to comment
Share on other sites

  • 0
конечно МОЖНО решить с помощью блочной верстки. но там такие извращения.....))

Да там все очень просто :D display:table-cell; для нормальных браузеров и, допуситим, expression для IE -- и ваша картинка отцентрирована.

Для примера код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {margin: 0px; padding: 0px;}
html,body {
background:#fff;
height:100%;
min-width:760px;
vertical-align:middle;
}
body {
display:table;
width:100%;
}
.pict {
display:table-cell;
vertical-align:middle;
}
.pict IMG {
display:block;
margin:0 auto;
}
</style>

<!--[if lte IE 7]>
<style type="text/css">
.pict IMG {
margin-top: expression((
document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) <0 ? "0" :
(document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px');
}
</style>
<![endif]-->
</head>

<body>
<div class="pict">
<img src="bomomo.png" alt="Some text" title="Some text" />
</div>
</body>
</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy