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

baz1k · August 1, 2008

Дано:

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

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

Надо:

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

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

Джин · August 1, 2008

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

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

baz1k · August 2, 2008

Спасибо. Таблица помогла.

klierik · August 2, 2008

а зря...

можно было это сделать на диве:

			   
		div.image-case {
			position:absolute;
			left:50%; top:50%; right:auto; bottom:auto;
			margin:-150px 0 0 -150px;
			height:300px; width:300px;
		}

Джин · August 2, 2008

klierik, коряво "работает"... когда например окно браузера сжимаю по вертикали это изображение вообще уходит за границы экрана... это первое что бросается в глаза.

Джин · August 2, 2008

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

<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>

klierik · August 2, 2008

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

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

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

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

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

Джин · August 2, 2008

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

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

baz1k · August 2, 2008

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

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

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

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

Azadi · August 2, 2008

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

Джин · August 2, 2008

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

Джин said:
решение нашел но потом понял что лучше без этого обойдусь)))

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

Azadi · August 3, 2008

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

Да там все очень просто 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>

Sign In

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

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information