Вертикальное выравнивание по центру

vo4tap · November 1, 2009

Есть div. в нем картинка. нужно сделать что бы эта картинка была по центру дива в котором она находится.

<!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>
<title>vo4tap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="vo4tap" />

<style type="text/css">
html, body {pading:0; margin:0; background-color:#000000; height:100%;  position:relative; }
img {border:0;}
#all {min-height:100%; text-align:center; background:#f2ddc6;}
</style>
</head>
<body>

<div id="all">
<img src="img/my_avatar.jpg" alt="vo4tap" />
</div>

</body>
</html>

vertical-align:middle; для блока #all не помогает.

нашел два способа по вертикальному выравниванию - то ли руки из опы то ли еще что... но конкретно на моем примере они не работают...

http://habrahabr.ru/blogs/css/73113/

http://habrahabr.ru/blogs/css/71236/

Можете что нибудь посоветовать?

Edited November 1, 2009 by vo4tap

SelenIT · November 1, 2009

Варианты с inline-block и центрированием в строке требуют конкретной высоты этой строки, для 100%-го блока это не пройдет. Здесь, на мое имхо, лучше такой метод применить...

vo4tap · November 1, 2009

display:table-cell;

vertical-align:middle;

не катит... =(

если высота и ширина у блока all задана в процентах то не работает этот способ. если в пикселях(меня это не устраивает) то работает нормально...

SelenIT · November 1, 2009

А процентам-то есть от чего отсчитываться? html, body { height: 100% } или что-то подобное стоит?

psywalker · November 2, 2009

display:table-cell;
vertical-align:middle;
не катит... =(
если высота и ширина у блока all задана в процентах то не работает этот способ. если в пикселях(меня это не устраивает) то работает нормально...

Держи, братский подгон:

HTML:

<!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>test</title>

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


		body,html { height: 100%;}

		div {
			display: table;
			vertical-align: middle;
			height: 60%;
			background: red;
			behavior: url('table-cell.htc');
		}

		div div {
			display: table-cell;
			vertical-align: middle;
			height: 100%;
			background: red;
		}



	</style>
</head>

<body>

	<div>
		<div>
			111<br />111<br />111<br />111<br />
		</div>
	</div>

</body>
</html>

htc файлик, создай и засунь в нужную деррикторию, и пропиши на него правильный путь

<public:component>
	<public:attach event="oncontentready" onevent="propertyChanged()" />
	<script language="Javascript">
		function propertyChanged() {
			var s = document.createElement('span');
			s.innerHTML = element.innerHTML;
			element.innerHTML = '';
			element.appendChild(s);

			element.style.display = 'block';

			s.style.display = 'block';
			s.style.position = 'relative';
			s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';

			window.onresize = function() {
				s.style.top = (element.offsetHeight / 2) - (s.offsetHeight / 2) + 'px';
			}
		}
	</script>
</public:component>

vo4tap · November 2, 2009

Спасибо закину в интересные скрипты...

но возможно ли это сделать без яваскриптов и прочих сложностей?

Justnewone · November 2, 2009

Спасибо закину в интересные скрипты...
но возможно ли это сделать без яваскриптов и прочих сложностей?

Таблица

vo4tap · November 2, 2009

то есть содержимое блока, размеры которого указаны в процентах выровнять во вертикали средствами цсс и хтмл(без таблиц) не представляется возможным? О_о

абалдеть.. вроде бы такая простая операция...

rus · November 2, 2009

то есть содержимое блока, размеры которого указаны в процентах выровнять во вертикали средствами цсс и хтмл(без таблиц) не представляется возможным? О_о
абалдеть.. вроде бы такая простая операция...

А что вы хотели? Прижать блок (футер) к низу - казалось бы, такая простая задачка, однако сколько вопросов по ней возникает у новичков и сколько различных способов ее решения в инете, думаете просто так что ли?

psywalker · November 2, 2009

vo4tap

На твоём месте я бы способ SelenIT использовал бы, последнее время он мне нравится и лишнего кода писать не надо

vo4tap · November 2, 2009

psywalker, но его способ не пашет. сделал по твоему. опера9.64 норм, фф3.5.4 норм. ИЕ6.0 даже с хаком - косяк =(

http://my.vo4tap.info/ =(

всем большое спасибо, псивалкеру отдельное =)

но если кто поможет поправить ИЕ было бы совсем прекрасно.

Edited November 2, 2009 by vo4tap

mishka · November 2, 2009

<!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>
	<title>Вертикальное центрирование элемента неизвестной высоты</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	html,body{
		height:100%;
	}
	body{
		margin:0;
		background:#ccc;
	}
	#wrapper{
		width:100%;
		height:100%;
		margin:0 auto;
		display:table;
	}
	#mc-1{
		display:table-cell;
		vertical-align:middle;
	}
	#mc-2{
		width:400px;
		overflow:hidden;
		margin:0 auto;
		padding:10px;
		border:1px solid #060;
		background:#fc0;
	}
	* html #mc-2{
		margin-top:expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2) <0 ? "0" :(document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2) +'px');
	}
	*+html #mc-2{
		margin-top:expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2) <0 ? "0" :(document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2) +'px');
	}
	-->
	</style>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
	<div id="mc-1">
		<div id="mc-2">
			<div id="mc-3">
				<h1>Вертикальное центрирование</h1>
				<p>Вертикальное центрирование элемента неизвестной высоты относительно окна браузера</p>
			</div>
		</div>
	</div>
</div>
<!-- end wrapper -->
</body>
</html>

psywalker · November 2, 2009

Медведь, я круче: :lol:

<!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>test</title>

	<style type="text/css">
		* { margin: 0;padding: 0; }
		body,html { height: 100%;}

		div#viravnivanie_out{
			display: table;
			_display: table-cell;
			vertical-align: middle;
			height: 100%;
		}

		div#all{
			display: table-cell;
			vertical-align: middle;
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}



	</style>
</head>

<body>

	<div  id="viravnivanie_out">
		<div id="all"><img src="my_avatar.jpg" width="338" height="336" /> </div>
	</div>

</body>
</html>

Без скрипта и один экспрешн!

Edited November 2, 2009 by psywalker

mishka · November 2, 2009

ТС

А кто будет ставить блоку all высоту авто для всех и 100% дли ие6?

Без скрипта и один экспрешн!

А у меня есть скриппт? И експрешенов разве сколько у меня??

Ну а то что от блока лишнего можна избавится, то я знаю но ща влом переделывать. Просто взял из старого решения.

Ну а насчет того что ты круче - я и неспорю :lol:

_display: table-cell;

Это лишнее потому что ие6-7 какраз таки table-cell и непонимают. А table понимают

vertical-align: middle; можна указать только один раз, тому блоку которому указываешь display: table-cell;

Итог:

<!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>test</title>

	<style type="text/css">
		* { margin: 0;padding: 0; }
		body,html { height: 100%;}
		#viravnivanie_out{
			display: table;
			height: 100%;
		}
		#all{
			display: table-cell;
			vertical-align: middle;
		}
		* html #all{
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
		*+html #all{
			margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
		}
	</style>
</head>
<body>
	<div id="viravnivanie_out">
		<div id="all">
			<p>Lorem ipsum dolor sit amet consectetuer velit Curabitur condimentum Curabitur mauris. Commodo Aenean tellus consequat eu Vivamus Aliquam semper senectus scelerisque et. Nibh a.</p>
			<p>Accumsan Nunc ipsum nonummy Aenean Pellentesque Donec est Pellentesque adipiscing sem. Augue vitae porttitor vel Curabitur ridiculus Sed semper risus libero neque. Congue.</p>
		</div>
	</div>

</body>
</html>

Edited November 2, 2009 by mishka2

Searcher · November 2, 2009

тут смотрели?

psywalker · November 2, 2009

mishka2

Вот видишь, а ты говоришь я круче :lol:

Searcher

Это не то, там тема на позиционировании, а нам бы строки выровнить

mishka · November 2, 2009

тут смотрели?

Этот способ не совсем хорош так как используется абсолют.

Один раз друг обратился за помощью - немог понять почему попапы в ие6 падают под список(был список в котором он использовал вертикальное центрирование с абсолютами). И попапы были расположенны в хтмл тоже внутри этих списков. А так как в ие6 никаким z-index елемент выше родителя не поднимешь(если у него тоже есть релейтив)(вернее выше соседа родителя находящегося ниже по хтмл... накрутил вобщем :lol: ) то вот такой баг у него получился.

И у вашего способа высота центрируемого блока фиксированна.

Edited November 2, 2009 by mishka2

Searcher · November 2, 2009

сорри

vo4tap · November 2, 2009

псивалкер, а как же братский подгон из пятого поста ( http://forum.htmlbook.ru/index.php?showtop...st&p=121424 ) ???

почему ты предложил новую версию, а не подделал старую? :lol: я без претензий - просто не понятно.... зачем делать заново если можно доделать то что уже сотворил?

> http://www.wpdfd.com/editorial/thebox/deadcentre4.html

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

Edited November 2, 2009 by vo4tap

psywalker · November 2, 2009

vo4tap

псивалкер, а как же братский подгон из пятого поста ( http://forum.htmlbook.ru/index.php?showtop...st&p=121424 ) ???
почему ты предложил новую версию, а не подделал старую?smile.gif я без претензий - просто не понятно.... зачем делать заново если можно доделать то что уже сотворил?

А братский подгон оказался не пригодным к идентификаторам почему-то, надо будет разбираться ещё с этим вопросом :lol:

> http://www.wpdfd.com/editorial/thebox/deadcentre4.html
это конечно выход но он не оч хороший, так как: 1) нужно знать рамер высоты блока 2) это выравнивание блока, а не его содержимого....

1) Ну тут уже походу ничё не попишешь

2) Ну сделай внутренний блок содержимым

vo4tap · November 2, 2009

psywalker, и снова проблемы =((

http://my.vo4tap.info/

теперь содержимое дива all не реагирует на text-align:center; и выравнивается по левому краю в ФФ и опере...

в ИЕ6 все нормально..=)

mishka · November 2, 2009

добавь блоку #viravnivanie_out ширину 100%

а это - min-width:100%; чтото мне непонятно... нелогично. Замени на просто width:100%;

Edited November 2, 2009 by mishka2

vo4tap · November 2, 2009

Всем спасибо. вопрос вроде бы исчерпан...

эх..кадаж я буду такой умный =((((((

psywalker · November 3, 2009

Всем спасибо. вопрос вроде бы исчерпан...
эх..кадаж я буду такой умный =((((((

До моего уровня ты уже дорос, а до уровня Медведяя тебее ещё ого-гооо сколькоо :lol:

mishka · November 3, 2009

До моего уровня ты уже дорос, а до уровня Медведяя тебее ещё ого-гооо сколькоо

1. Прекращай меня пиарить.

2. У тебя явно заниженна самооценка. Мои знания явно не больше твоих. :lol:

psywalker · November 3, 2009

1. Прекращай меня пиарить.
2. У тебя явно заниженна самооценка. Мои знания явно не больше твоих.

ладно, я знаю, что говорю, пойду лучше дальше книжку читать

Sign In

Вертикальное выравнивание по центру

Question

Link to comment

Share on other sites

25 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

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