Выравнивание содержимого div по центру по вертикали

Arigato · February 17, 2011

Если для ячейки таблицы прописать свойство vertical-align: middle, то получим выравнивание содержимого по центру. Для div такое не работает. Что нужно сделать, что бы получить такое выравнивание?

Selen · February 18, 2011

Если для ячейки таблицы прописать свойство vertical-align: middle, то получим выравнивание содержимого по центру. Для div такое не работает. Что нужно сделать, что бы получить такое выравнивание?

Для DIvов vertical-align не работает.

Есть несколько решений данной проблемы:

1. .middle {

display: table-cell;

vertical-align: middle;

}

Минус данного способа - не работает в ИЕ ниже 8 версии.

2. height: px;

line-height: px;

Указываешь одинаковые значения.

3. С помощью скриптов. Но это уже крайний случай.

Vlad · February 18, 2011

Еще есть padding x 0; Это когда высота явно не нужна.

Arigato · February 18, 2011

Странно, поясните, почему не работает:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Style-Type" content="text/css">
		<title>Test</title>
		<style type="text/css">
#title {
	position: absolute;
	left: 0px;
	top: 20px;
	height: 84px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	background: red;
}

#title h1 {
	font-size: 14pt;
	color: white;
	margin: 0px 250px;
}
		</style>
	</head>
	<body>
		<div id="title">
			<h1>Title test</h1>
		</div>
	</body>
</html>

SelenIT · February 18, 2011

Видимо, высота строки заголовка больше заказанных 20px для дива, она в него просто не влезает (не говоря уже о том, чтобы распределять свободное место — его просто нет).

Arigato · February 18, 2011

Хм, не понял, высота дива 84 пикселя, а 20 - это отступ от верхней границы браузера.

Edited February 18, 2011 by Arigato

DrHorror · February 19, 2011

Можно попробовать еще такой вариант.

Задаем позиционирование элемента на 50% (top: 50%; ) по вертикали относительно родительского элемента (position: relative;) и поднимаем на половину высоты (height: 50px;) самого элемента (margin-top: -25px;).

Недостаток:

* Для выполнения позиционирования, нужно знать высоту центрируемого элемента, чтобы рассчитать margin-top.

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

Для случая с line-height.

Укажи у #title h1 {line-height: 84px;}

Edited February 19, 2011 by DrHorror

Arigato · February 19, 2011

Мне все-таки не ясно, почему не работает мой пример. Если из него убрать

  position: absolute;
	left: 0px;
	top: 20px;

То все нормально, а так выравнивает по верхнему краю (при любых значениях top).

С line-height работает, но если строка длиннее, чем отведенное пространство, то она просто справа обрезается. А мне надо именно как в ячейке таблицы, что бы если текст помещается в 1 строку, то эта строка была бы по центру, если нет, то что бы было бы выведено в 2 строки тоже по центру.

DrHorror · February 19, 2011

Дело в том, что по стандарту CSS 2 свойство position не наследуется дочерними элементами.

В твоем случае так и получается. Свойство position: absolute; применено к родительскому элементу, а дочерний элемент этот сдвиг не касается.

Правда, если перемещать родительский элемент, то и дочерний элемент будет двигаться за ним, но лишь в силу того, что расположен внутри. А так, получается, что свойство vertical-align, почему-то перебивается свойством position. Почему не знаю, может это какой-то косяк CSS или браузеров, ведь ничто не совершенно.

Edited February 19, 2011 by DrHorror

Arigato · February 19, 2011

Ну хорошо, тогда как же решить мой вопрос или все же придется применить таблицу?

DrHorror · February 19, 2011

Если твой код изменить так, то у меня работает

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Style-Type" content="text/css">
        <title>Test</title>
        <style type="text/css">
#title {
    position: absolute;
    left: 0px;
    top: 20px;
    height: 84px;  
    text-align: center;
    background: red;
}

#title h1 {
    font-size: 14pt;
    color: white;
    margin: 0px 250px;
}

#text {
    height: 84px;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}
        </style>
    </head>
    <body>
        <div id="title">
            <div id="text"><h1>Title test</h1></div>
        </div>
    </body>
</html>

И двигай все куда хочешь))

Edited February 19, 2011 by DrHorror

Arigato · February 19, 2011

Помогите, уже голову сломал. Вот код всей странички:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
		<meta http-equiv="Content-Language" content="ru"> 
		<meta name="Robots" content="all">
		<meta name="Revisit-After" content="1 days">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<title>{#IF TITLE}{TITLE} - {IF#}...</title>
<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	background: #FFF;
	margin: 0px;
}

#sky {
	color: #E70;
	font-size: 8pt;
	padding: 2px;
	margin-left: 4px;
}

#header {
	background: #549D1B;
	height: 84px;
	margin: 1px;
}

#logo {
	position: absolute;
	left: 0px;
	top: 40px;
	text-align: center;
	font-size: 12pt;
	font-weight: bold;
	width: 250px;
}

#logo a {
	text-decoration: none;
	color: white;
}

#title {
	position: absolute;
	left: 0px;
	top: 20px;
	width: 100%;
	height: 84px;
	text-align: center;
}

#h1 {
	width: 100%;
	height: 84px;
	display: table-cell;
	vertical-align: middle;
	padding: 0px 250px;
	border: 1px solid yellow;
}

#title h1 {
	font-size: 14pt;
	color: white;
	text-align: center;
	border: 1px solid black;
}

#content {
	margin-left: 250px;
	padding: 2px;
}

#menu {
	position: absolute;
	left: 0;
	top: 104px;
	width: 240px;
	padding: 2px;
}

#footer {
	background: #E8E8E8;
	padding: 5px;
	margin: 5px;
	font-size: 8pt;
}

#search {
	position: absolute;
	right: 0px;
	top: 35px;
	width: 248px;
	margin: 1px;
	text-align: center;
	font-size: 8pt;
	color: white;
}

table {
	border-collapse: collapse;
}

form {
	margin: 0px;
}

form table th, form table td {
	padding: 2px;
}

form table th {
	font-weight: normal;
	text-align: right;
}

form table td.button {
	text-align: center;
}

input, select {
	background: white;
	border: 1px solid black;
	font-size: 8pt;
	margin: 1pt;
}

input:focus, select:focus {
	border: 1px solid #800;
}

input.button {
	background: #418313;
	color: white;
	border: 1px solid #D5EFC4;
	cursor: pointer;
}

.block_head, .block_body {
	font-size: 10pt;
	border: 1px solid #CCC;
	margin: 1px;
}

.block_head {
	margin-bottom: 0;
	padding: 2px;
	background: #549D1B url(images/gradient.png) repeat-y;
	color: white;
	text-align: center;
	font-weight: bold;
}

.block_body {
	margin-top: 0;
	padding: 4px;
	border-top: none;
	background: #E8E8E8;
	color: black;
}
</style>

	</head>
	<body> 

		<div id="sky">
			Небо сайта!
		</div>

		<div id="header"></div>

		<div id="title">
			<div id="h1">
				<h1>{TITLE}</h1>
			</div>
		</div>

		<div id="logo">
			<a href="/">Название строка 1<br>
			Строка 2</a>
		</div>

		<div id="content">
			{CONTENT}
		</div>

		<div id="menu">
			{#INCLUDE left.tpl}
		</div>

		<div id="footer">
			© бла-бла-бла, 2007-{YEAR}<br>
			{#IF DEBUG}{#INCLUDE fps.tpl}{IF#}
		</div>

		<div id="search">
			<strong>Поиск</strong><br>
			<form method="get" action="" onsubmit="if ( this.keywords.value == '' ) {alert ('Для поиска введите ключевые слова'); return false;} else return true;">
				<input type="text" size="38" name="keywords" value=""><br>
				<input type="submit" value="Найти" class="button">
				</table>
			</form>
		</div>

	</body> 
</html>

Вот, как это выглядит в браузере:

А мне надо выравнять {TITLE} по центру зеленой шапки.

Edited February 19, 2011 by Arigato

tt48 · February 20, 2011

#title{
text-align: center;
}
<!-- или -->
#title h1{
margin:0 auto;
}

Arigato · February 21, 2011

Все равно не работает.

tt48 · February 21, 2011

Все равно не работает.

К H1 добавь padding-left: 250px;

Учитывая, что #logo имеет ширину 250px(т.е. - фикс), это более-менее

нормальное решение.

Sign In

Выравнивание содержимого div по центру по вертикали

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