Выравнивание содержимого блока DIV по вертикали

ili4-87 · June 5, 2011

Всем привет!

Допустим, имеется блок div со следующим описанием:

<div style="

border: 1px solid black;

height: 200px;

width: 100px;">Text

</div>

Если добавить этот код в HTML документ, то получим контейнер 100px*200px с текстом "Text".

Какой атрибут CSS нужно добавить к описанию стиля DIV, чтобы выравнять Text по вертикали по центру нашего контейнера? Да и существует ли такой атрибут?

Заранее спасибо за помощь!

psywalker · June 5, 2011

Всем привет!
Допустим, имеется блок div со следующим описанием:
<div style="
border: 1px solid black;
height: 200px;
width: 100px;">Text
</div>
Если добавить этот код в HTML документ, то получим контейнер 100px*200px с текстом "Text".
Какой атрибут CSS нужно добавить к описанию стиля DIV, чтобы выравнять Text по вертикали по центру нашего контейнера? Да и существует ли такой атрибут?
Заранее спасибо за помощь!

Нет, атрибутов таких нет точно, а вот свойства CSS есть. Например ты можешь сделать так:

<div style="
border: 1px solid black;
height: 200px;
width: 100px;
display: table-cell;
vertical-align: middle;">Text
</div>

Softlink · June 5, 2011

Всем привет!
Допустим, имеется блок div со следующим описанием:
<div style="
border: 1px solid black;
height: 200px;
width: 100px;">Text
</div>
Если добавить этот код в HTML документ, то получим контейнер 100px*200px с текстом "Text".
Какой атрибут CSS нужно добавить к описанию стиля DIV, чтобы выравнять Text по вертикали по центру нашего контейнера? Да и существует ли такой атрибут?
Заранее спасибо за помощь!

1) если не вставлять код в специальные теги, то некоторые люди здесь будут вас ругать.

2) по теме. Можно сделать так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
<title>Пример</title>
<style type="text/css">

.text{
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>

<body>
	<div class="text">
	текст
	</div>
</body>
</html>

но значение table-cell не поддерживается ие 6-7.

3) если у вас постоянная заданная высота блока, то лучше все сделать пэддингом.

psywalker · June 5, 2011

Всем привет!
Допустим, имеется блок div со следующим описанием:
<div style="
border: 1px solid black;
height: 200px;
width: 100px;">Text
</div>
Если добавить этот код в HTML документ, то получим контейнер 100px*200px с текстом "Text".
Какой атрибут CSS нужно добавить к описанию стиля DIV, чтобы выравнять Text по вертикали по центру нашего контейнера? Да и существует ли такой атрибут?
Заранее спасибо за помощь!
1) если не вставлять код в специальные теги, то некоторые люди здесь будут вас ругать.
2) по теме. Можно сделать так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
<title>Пример</title>
<style type="text/css">

.text{
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>

<body>
	<div class="text">
	текст
	</div>
</body>
</html>
но значение table-cell не поддерживается ие 6-7.
3) если у вас постоянная заданная высота блока, то лучше все сделать пэддингом.

1) Точно!

2) Для ИЕ6-7 нужны экпрешаны.

3) padding не подойдут, так как возможно текста будет столько, что нужно будет постоянно их менять, чтобы привести к вертикали.

Softlink · June 5, 2011

3) padding не подойдут, так как возможно текста будет столько, что нужно будет постоянно их менять, чтобы привести к вертикали.

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

ili4-87 · June 5, 2011

Ещё один вопрос:

Почему при добавлении к описанию класса "text" атрибута float "текст" снова прилипает к верхней границе блока?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
<title>Пример</title>
<style type="text/css">

.text{
float: left;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>

<body>
        <div class="text">
        текст
        </div>
</body>
</html>

Какая может быть связь между обтеканием блока снаружи и выравниванием содержимого внутри?

psywalker · June 5, 2011

Ещё один вопрос:
Почему при добавлении к описанию класса "text" атрибута float "текст" снова прилипает к верхней границе блока?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
<title>Пример</title>
<style type="text/css">

.text{
float: left;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>

<body>
        <div class="text">
        текст
        </div>
</body>
</html>
Какая может быть связь между обтеканием блока снаружи и выравниванием содержимого внутри?

Я не понял, тебе нужно внутри блока выровнять текст или чтобы весь этот блок сам был выровнен по вертикали в его контейнере?

buddah · June 5, 2011

Насколько я знаю display:table-cell и float не работают вместе, разве не так?

Edited June 5, 2011 by buddah

ili4-87 · June 5, 2011

Я не понял, тебе нужно внутри блока выровнять текст или чтобы весь этот блок сам был выровнен по вертикали в его контейнере?

Сперва было нужно выровнять текст внутри контейнера - вы мне с этим помогли. Теперь, если мы захотим разместить справа от контейнера какой-нибудь текст и добавим внутрь класса "text" атрибут "float: left", то содержимое контейнера снова окажется у его верхней границы. Как этого не допустить?

См. пример ниже:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=Windows-1251" />
<title>Пример</title>
<style type="text/css">

.text{
float: left;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>

<body>
        <div class="text">
        текст
        </div>
		<p>
		Основной текст страницы обтекает контейнер справа
		</p>
</body>
</html>

Насколько я знаю display:table-cell и float не работают вместе, разве не так?

Я этого не знал

Edited June 5, 2011 by ili4-87

psywalker · June 5, 2011

Ну так возьми и всему блоку, контейнеру задай такие же стили и выравнивание. Сделай короче контейнер с display: table;

Coneenoc · December 5, 2011

Вот так можно выровнять 2 divа рядом с друг другом (и контент внутри них по центру), а парметр vartical-align:middle действительно не работает если стоит float, Или высота указан в %. Кому поможет, дайте знать!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled</title>

</head>

<style>

body {

font-family:Arial;

font-size:12;

}

</style>

<!--[if IE]>

<style>

#1up, #1down {

position:relative;

display:block;

width:100%;

}

#1up {

top:50%;

}

#1down {

top:-50%;

}

</style>

<![endif]-->

<body>

</div>

name:

</div>

</body>

</html>

Sign In

Выравнивание содержимого блока DIV по вертикали

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information