Как сделать выравнивание в таблице по вертикали?

Когда-то давно, когда верстали все таблицами, текст в td прижимали к верху с помощью:

<td valign="top"></td>

А как того же результата добиться с помощью css?

Vertical-align:top
не?

Неа, не воркает оно

Как это не воркает?
Может вы не умете его воркать?
посилання

Отцентрировать что-нибудь вертикально внутри какого-либо элемента(экрана например).

Возьмем такой вот HTML:

   <div id="out">

 <p id="centered" >…</p>

</div>

Будем выравнивать этот абзац текста(с переменной высотой конечно, она зависит от текста). Высота #out не имеет особого значения - но пускай будет к примеру 500px(заведомо больше высоты параграфа).

Для всех современных броузеров(не IE) это достигается двумя простыми строками:

   1. #out{

   height:500px;

   display:table-cell;

   vertical-align:middle;

  }

Только и всего. Теперь нужно это повторить для ИЕ…
IE+expression=нормальный броузер

Для эмуляции будем использовать expression (маленькие кусочки джаваскрипта который можно внедрять в CSS и работают лишь в ИЕ).
Вот что сэмулирует нам вертикальное выравнивание в ИЕ для элемента #centered внутри другого элемента:

#centered {

margin-top: expression(((outer.offsetHeight/2)

-parseInt(offsetHeight)/2)  <0 ? "0" :

(outer.offsetHeight/2)

-(parseInt(offsetHeight)/2) +'px') ;

}

(видно как внутри ЦСС правил для #centered мы получаем его высоту по айдишнику centered.offsetHeight и высоту div#outer)
Или если мы выравниваем внутри body:

#centered{

margin-top: expression((

document.documentElement.offsetHeight/2)

-(parseInt(offsetHeight)/2) <0 ? "0" :

(document.documentElement.offsetHeight/2)

-(parseInt(offsetHeight)/2) +'px') ;

Это правило определяет высоту родительского элемента(или body) и высоту центрируемого элемента - после чего добавляет нужный margin-top для вертикального центрирования элемента.

Был предложен также метод для классов:
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px"
(parseInt убран для наглядности)
Как это работает

1. document.documentElement.offsetHeight/2
определяет высоту body и делит ее на 2. Это дает нам отступ ровно в половину высоты экрана
2. -(parseInt(offsetHeight)/2))
Определяет высоту самого центрируемого блока. Отнятое от высоты родителя дает нам конечный margin-top
3. <0 ? "0" :
Если полученная разница отрицательная, то отступу присваивается значение 0.
4. <0 ? "0" :
Если же полученный результат больше либо равен 0, то повторяем вычисления и берем margin-top равный полученному значению для вертикального центрирования

Цитата ("penguin"):

Как это не воркает?
Может вы не умете его воркать?

если задать просто так в параметрах css td, то не воркает

ArtPro, пасиба

Насколько я знаю, есть способ:

div {

display: table-cell; /* посилання */

vertical-align: middle; /*или иное значение */

}

но он не работает в ИЕ (даже в ИЕ8, как написано по ссылке выше)

UPD: Про который, прошу прощения, уже писали:

Цитата:

Цитата ("ArtPro"):

Для всех современных броузеров(не IE) это достигается двумя простыми строками:

Код:
1
2
3
4
51. #out{
height:500px;
display:table-cell;
vertical-align:middle;
}


Только и всего. Теперь нужно это повторить для ИЕ…

Для одиночных параграфов (и иных, не знаю точно каких, элементов) подходит способ:

p {

line-height:30px;

height:30px;

}

Я им как-то раз пользовался (Источник: посилання ).

Есть еще ссылки (по той же ссылке, на странице внизу), но нет времени посмотртеь :(

Хотя, как-то размышляя и проглядывая в интернете примеры, где появляются скрипты итп, я подумал, что лучше бы сделать так:

<style type="text/css">

<!--

.centered {

border: 0 none;

padding: 0;

margin: 0;

}

.centered td {

vertical-align: center;

height: 100px; /*необходимое значение*/

}

// -->

</style>

...

<table cellspacing="0" cellpadding="0" class="centered"><tr><td>Text</td></tr></table>

:P

:o
penguin +1
я тоже всегда думал что для td достаточно vertical-align:top;