Вертикальное центрирование блочных эелементов

alexshvarts · August 18, 2010

приветствую

собственно, столкнулся с проблемой вертикального центрирования картинок внутри блока, в случае вёрстки элементарной галереи. В общем, дабы не быть голословным, сразу покажу, что я именно имею ввиду:

На этом изображении, на части Рис. 2 образно приведено то, что должно получиться в этоге, на Рис. 1 - то, что получается, когда я пытаюсь сверстать этот участок всеми мне известными способами)

Здесь Подкладка - это блок, возможно с неким бэкграундом, Картинки - собственно картинки в неких других инлайн или блочных элементах.

Рис. 2, показыват, как мне нужно сверстать эту часть - блоки подкладки одинаковой ширины и высоты с равными отступами расположены на части галереи, и внутри них расположены картинки - выровненные вертикально по-центру. Условие также отягощяется ещё и тем, что все картинки могут иметь различную высоту, и их нужно центрировать по-вертикали.

Покажите пожалуйста пример (или дайте ссылку) где реализована подобная вёрстка.

Спасибо.

evz · August 19, 2010

Моё первое предположение: если известна высота блока-контейнера и высота картинки, то можно расcчитать margin-top или padding-top с помощью JS.

Я тоже интересуюсь вопросом вертикального центрирования и искал его решение в Интернете.

На сегодняшний день я пришёл к такому выводу: вертикально центрировать объекты в окне браузера и в div'ах (включая внутренние div'ы) одними только средствами HTML и CSS невозможно. Без JS наверное не обойтись. Сам я не имею опыта работы с JS.

Вертикальное центрирование объектов средствами HTML и CSS реализуется только в ячейках таблиц.

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

Edited August 19, 2010 by evz

stars · August 19, 2010

На вскидку как вариант:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
	<style type="text/css">
		#block {
			width: 300px;
			height: 300px;
			background: red;
			vertical-align: middle;
			display: table-cell;
		}
		#block0 {
			width: 150px;
			height: 150px;
			background: gray;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="block">
		<div id="block0"></div>
	</div>
</body>
</html>

ie 6 не поддерживается...

Если известны размеры дива который у меня block0 (у вас это картинки различной высоты) то можно сделать так

#block {
	position: relative;
	width: 300px;
	height: 300px;
}
#block0{
	width: 150px;
	height: 150px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin:-75px 0 0 -75px;
}

Суть в том что block0 задается абсолютное позиционирование и отодвигается на 50% по вертикале и горизонтале значит верхний левый угол блока у нас в центре родительского элемента в данном случаи block, нам остается сдвинуть блок на 50% собственной ширены и высоты обратно используя margin.

Еще есть способ выставить блок по центру с помощью js(Суть в том чтобы вычислять размеры дива и родителя, делить размер родителя по полом и из них вычетать половину размера дива дальше записывать отступ в css диву)... На jquery будет примерно так

$('#block0').css({
	position:'absolute',
	left: ($(document).width() - $('#block0').outerWidth())/2,
	top: ($(document).height() - $('#block0').outerHeight())/2
});

Моё первое предположение: если известна высота блока-контейнера и высота картинки, то можно расcчитать margin-top или padding-top с помощью JS.

Для JS нет необходимости в предопределенной высоте, достаточно дождаться когда DOM будет сформирован

Edited August 19, 2010 by stars

Great Rash · August 19, 2010

http://forum.htmlbook.ru/index.php?showtopic=19320

evz · August 19, 2010

Great Rash, спасибо за прекрасное решение!

Я очень рад, что ошибся в своей первоначальной точке зрения.

В завершение не откажите в любезности, объясните, пожалуйста, мне, чайнику, что означает параметр -moz в записи "display: -moz-inline-block;"?

Я не нашёл описания этого параметра в описании "display"-я в нашем уважаемом "HTMLBOOK"-е (по адресу http://htmlbook.ru/css/display.html ).

А ещё лучше: пошлите меня в то место, где написано, что такое "-moz".

С уважением,

Евгений З.

Edited August 19, 2010 by evz

Great Rash · August 19, 2010

Все селекторы с черточками это расширения браузеров. Такие расширения одобрены W3C и такие документы проходят валидацию.

Существует несколько типов расширений:

-moz - расширения для Mozilla Firefox

-o - расширения для Opera

-webkit - расширения для браузеров на движке Webkit (Apple Safari, Google Chrome)

-ms - расширения для Internet Explorer

Вот ссылка на описание расширений для Мозиллы: https://developer.mozilla.org/en/CSS_Refere...illa_Extensions

Вот ссылка на описание расширений для ИЕ: http://msdn.microsoft.com/en-us/library/ms531207(VS.85).aspx

Остальные не знаю, если найдете запостите сюда буду благодарен.

evz · August 19, 2010

Благодарю, Great Rash, за помощь и отзывчивость!

———————————————————————

Добавил через сутки:

Реализовал предложенным методом вертикальное центрирование блока на своем сайте, испытываю праздник души!

Edited August 21, 2010 by evz

alexshvarts · August 19, 2010

мда, спасибо, помогло снова пересмотреть некоторые идеологии пассов с блоками и инлайнами )

alexshvarts · August 19, 2010

Однако, всё-таки, прийдётся уточнить для моего конкретного случая - этот приём хорош, когда у нас отсутствует "подкладка" так сказать, которая в нашем примере одинакового размера, является блоком (хотя, блок ли это или инлайн, если всё будет отображаться как надо - мну глубоко фиолетово и несёт некий бэкграунд для самой картинки. Чуть перерисую пример, что б было понятней:

Вот как-то так должна выглядеть эта часть сайта. Если не использовать подкладки, то всё отображается замечательно (картинки центрируются по вертикали) однако, какой элемент можно использовать в этом случае для подкладки, не совсем понятно, так как только стоит задать ширину/высоту для этого inline-block элемента (или другого, его чайлд) как снова все картинки прижимаются к верхней части родителя, а про плавающую модель я вообще молчу.

То есть, нужно добиться примерной визуальной имитации того, что как-бы .child в этом случае является фоном-подкладкой у которых везде высота одинаковая, но разумеется, для каждой конкретной картинки с разной высотой, его высота будет меняться, и если задать ему height явно, то суть решения со 100% высотой, теряет смысл для этого конкретного случая.

В общем, если кто-нибудь знает, как это решается, судавольствием вас послушаю )

alexshvarts · August 19, 2010

В общем, к сожалению, никакого работающего решения кроме УГ, который приведу чуть ниже, я для себя не нашёл. Однако, в моём способе, действительно становится актуален вопрос - а оправданы ли здесь окажутся стили, таблицами эту часть каталога сверстать получится гараздо проще )

в общем, как я это сделал (если по отношению к исходному примеру):

		.parent {
			margin: 0 auto;
			text-align: center;
			border: red 1px dotted;
			[b]float: left;						 
			height: 300px;[/b]				 /*высота всех подкладок-бэкграундов*/
			background: #6F9;				/*Просто для проверки... этот бэкграунд и есть та самая подкладка, вместо цвета юзаем картинку и т.д.*/
		}

далее начинается настоящая дивиантность блин

	<div class="parent">	 <!-- первая картинка с подкладкой -->
		<div class="child">
			<a href="#"><img src="deps/teachers1.jpg" /></a>
		</div>
		<div class="helper"></div>
	</div>

	<div class="parent">	 <!-- вторая картинка с подкладкой -->
		<div class="child">
			<a href="#"><img src="deps/teachers2.jpg" /></a>
		</div>
		<div class="helper"></div>
	</div>
и т.д.

в общем, если кто знает, как это всё оптимизировать или использовать хотя бы один parent на один горизонтальный ряд галереи, пожалуйста предлагайте решения )

Great Rash · August 20, 2010

Ну вы че-то намудрили... Не надо приведенную мной верстку буквально воспринимать, надо чуток мозгами пораскинуть...

<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 100.1%;
		}

		body {
			font: 62.5% 'Trebuchet MS', Arial, Tahoma, Verdana, sans-serif;
		}

		ul {
			width: 70%;
			margin: 0 auto;
			text-align: center;
			list-style: none;
			line-height: 0;
			letter-spacing: -0.3em;
		}

		ul li {
			display: -moz-inline-stack;
			display: inline-block;
			//display: inline;
			//zoom: 1;
			overflow: hidden;

			line-height: normal;
			letter-spacing: normal;
			white-space: nowrap;
			vertical-align: top;

			width: 200px;
			height: 200px;
			margin: 5px;
			background: url('http://www.adamdorman.com/_images/gradient.jpg') 0 0 no-repeat;
		}

		ul span {
			display: inline-block;
			vertical-align: middle;
		}

		ul .helper {
			width: 0;
			height: 100%;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<ul>
		<li>
			<span>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" alt="" />
			</span>
			<span class="helper"></span>
		</li>
		<li>
			<span>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="50" alt="" />
			</span>
			<span class="helper"></span>
		</li>
		<li>
			<span>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="70" alt="" />
			</span>
			<span class="helper"></span>
		</li>
		<li>
			<span>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="90" alt="" />
			</span>
			<span class="helper"></span>
		</li>
		<li>
			<span>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="110" alt="" />
			</span>
			<span class="helper"></span>
		</li>
		<li>
			<span>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="90" alt="" />
			</span>
			<span class="helper"></span>
		</li>
	</ul>

</body>
</html>

alexshvarts · August 20, 2010

СПС! Просто мало практики, буду оттачивать скилы дальше )

зы: всё-таки добавлю - круто свёрстано )

Edited August 20, 2010 by alexshvarts

mishka · August 20, 2010

А так не лучше?

<!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" lang="ru">

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>An XHTML 1.0 Strict standard template</title>
	<style type="text/css">
		body{
			margin:0;
		}
		ul{
			margin:0;
			padding:0;
			list-style:none;
			width:100%;
			overflow:hidden;
		}
		li{
			float:left;
			display:inline;
			margin: 5px;
		}
		div{
			display:table-cell;
			vertical-align:middle;
			text-align:center;
			width: 200px;
			height: 200px;
			background: url('http://www.adamdorman.com/_images/gradient.jpg') no-repeat;
		}
		img{
			vertical-align:top;
		}
		* html ul img{
			margin-top:expression(this.offsetHeight <= this.parentNode.offsetHeight ? (this.parentNode.offsetHeight - this.offsetHeight)/2 + 'px' : '0px');
		}
		*+html ul img{
			margin-top:expression(this.offsetHeight <= this.parentNode.offsetHeight ? (this.parentNode.offsetHeight - this.offsetHeight)/2 + 'px' : '0px');
		}
	</style>
</head>

<body>
	<ul>
		<li>
			<div>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" alt="" />
			</div>
		</li>
		<li>
			<div>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="50" alt="" />
			</div>
		</li>
		<li>
			<div>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="70" alt="" />
			</div>
		</li>
		<li>
			<div>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="90" alt="" />
			</div>
		</li>
		<li>
			<div>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="110" alt="" />
			</div>
		</li>
		<li>
			<div>
				<img src="http://honw.ru/heroes/picks/Keeper%20of%20the%20Forest.jpg" width="128" height="90" alt="" />
			</div>
		</li>
	</ul>
</body>
</html>

Edited August 20, 2010 by mishka2

Great Rash · August 20, 2010

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

mishka · August 20, 2010

ну если хочется поднять производительность, то можна експрешн выполнить только 1 раз.

Как скрипты вырубать в ие - даже не догадываюсь ))

Зато код почище )

Sign In

Вертикальное центрирование блочных эелементов

Question

Link to comment

Share on other sites

14 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

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