Выравнивание текста по вертикали. В DIVe.

nik70 · March 28, 2010

Люди, проясните ,пожалуйста!

Грызу мат. часть, наметился пробел в понимании. Вопрос в следующем:

1. Почему в ниже приведенном примере не работает выравнивание текста по вертикали, с помощью "vertical-align"? Конфликт инлайновых и блочных категорий?

2. Как при помощи CSS, в Div выравнять текст по вертикали без применения маржинов и пейжинов (что-нибудь типа text-align: center; - тока по вертикали...)? Утопия?

Капец, сам не угрызу... У кого есть разжеванное?

Спасибо за внимание.

<TITLE>Документ без названия</TITLE>

<!--

.bb {

width: auto;

height: 400px;

font-weight:900;

text-align: center;

vertical-align:middle;

}

-->

</STYLE>

</HEAD>

<BODY>

<P>Как этот текст вертикально отцентрировать по вертикали? При помощи свойств CSS! Почему не работает vertical-align?</P>

</DIV>

</BODY>

</HTML>

psywalker · March 28, 2010

Потому-что это не таблица или не дивы с display:table.

nik70 · April 2, 2010

пробовал назначить диву

display: table;

vertical-align: middle;

текст жмется вверх... редиска. А надо по середине.

Как же обойтись без маржинов и пейжинов? Я думал это просто.

Кстати, PSYWALKER, Ваша подпись... Вы предпочитаете верстать в таблицах? Другими словами, Вы в первую очередь рассматриваете возможность и целесообразность табличной верстки? обещаю не спрашивать "почему?" написано много, но все в пользу дивов, поэтому заинтересовала Ваша подпись.

Edited April 2, 2010 by nik70

rediskavet · April 2, 2010

p
{
position:relative;
top:50%;
}

psywalker · April 3, 2010

Кстати, PSYWALKER, Ваша подпись... Вы предпочитаете верстать в таблицах? Другими словами, Вы в первую очередь рассматриваете возможность и целесообразность табличной верстки? обещаю не спрашивать "почему?" написано много, но все в пользу дивов, поэтому заинтересовала Ваша подпись.

Да нет, просто люблю юмор :angry:

s0rr0w · April 3, 2010

Люди, проясните ,пожалуйста!
Грызу мат. часть, наметился пробел в понимании. Вопрос в следующем:
1. Почему в ниже приведенном примере не работает выравнивание текста по вертикали, с помощью "vertical-align"? Конфликт инлайновых и блочных категорий?
2. Как при помощи CSS, в Div выравнять текст по вертикали без применения маржинов и пейжинов (что-нибудь типа text-align: center; - тока по вертикали...)? Утопия?
Капец, сам не угрызу... У кого есть разжеванное?
Спасибо за внимание.

1. Потому что есть два различных поведения элементов. Если это не ячейка таблицы, то выравнивание применяется для инлайновых блоков относительно инлайн-бокса, в котором они находятся. Если это ячейка таблицы - то выравнивание применяется не только на строчные элементы, но и на блочные, но уже относительно самой ячейки.

2. Превратить контейнер в ячейку таблицы при помощи display: table-cell

nik70 · April 6, 2010

1. Потому что есть два различных поведения элементов. Если это не ячейка таблицы, то выравнивание применяется для инлайновых блоков относительно инлайн-бокса, в котором они находятся.

Спасибо, становится теплее в ситуации "display: table-cell"

Но в остальном полный мороз. Не пойму где я не пойМУ.

Подскажите, плиз где я не правильно рассуждаю, если я рассуждаю так:

"1. Назначая контейнеру "display: inline", я прошу, хоть не надолго (в конце концов требую) генерировать инлайн-бокс.

2. Назначая контейнеру "vertical-align: middle", я указываю правила выравнивания, в этом контейнере, для инлайн элементов.

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

4. Если, я вложу в контейнер текст, заключенный в теги <P> и при помощи CSS, назначу ему "display: inline" то он будет иметь инлайн свойства.

5. Если в п.1-4 все правильно, то должно работать выравнивание текста по вертикали в следующем примере:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Документ без названия</title>

<!--

.bb {

width: auto;

height: 400px;

font-weight:900;

text-align: center;

display: inline;

vertical-align: middle;

}

p { display: inline; }

-->

</style>

</head>

<body>

Как этот текст меня достал!!!!!!!

</div>

</body>

</html>

однако не выравнивает, проверял в 4-ох браузерах, разных."

s0rr0w · April 6, 2010

5. Если в п.1-4 все правильно, то должно работать выравнивание текста по вертикали в следующем примере:
однако не выравнивает, проверял в 4-ох браузерах, разных."

Выравнивает. Вы путаете теплое с мягким. Почитайте для начала, что такое инлайновый бокс, с чем его едят.

nik70 · April 7, 2010

прочитал еще некоторый раз. Спецификацию.

Неужели? Выравнивание происходит в инлайн боксе, высота которого регулируется с помощью 'line-height'. По этому я не видел изменений, т.к. ожидал изменений (выравнивания) относительно "height: 400px".

Так? Ну очень похоже!

Если так, то как(где) в этом случае проявляется "height: 400px" (код в первом топике) ? Игнорируется, т.к. согласно спецификации:

"Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов"

Так штоли?

s0rr0w · April 7, 2010

прочитал еще некоторый раз. Спецификацию.
Неужели? Выравнивание происходит в инлайн боксе, высота которого регулируется с помощью 'line-height'. По этому я не видел изменений, т.к. ожидал изменений (выравнивания) относительно "height: 400px".
Так? Ну очень похоже!
Если так, то как(где) в этом случае проявляется "height: 400px" (код в первом топике) ? Игнорируется, т.к. согласно спецификации:
"Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов"
Так штоли?

Похоже не правду.

nik70 · April 8, 2010

Спасибо, Вы мне помогли.

oldor0 · February 11, 2011

Я тоже долго ломал голову столкнувшись с такой же проблемой. в итоге решил таким образом:

<div>

<span><span>Как же этот текст меня задолбал!!!</span></span>

</div>

Стили в CSS

div {

position: relative;

}

div span {

display: block;

position: absolute;

top: 50%;

left: 0%;

width: 100%;

}

div span span {

position: relative;

top: -50%;

}

ev09 · June 20, 2012

<div style='border:2px solid #000; display: table;  text-align:center; vertical-align: middle; width:200px; height:80px;'><span style='display: table-cell; vertical-align: inherit;'>Ура я посередке!</span></div>

Sign In

Выравнивание текста по вертикали. В DIVe.

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information