CSS - разбираемся почему не работает vertical-align

CSS - разбираемся почему не работает vertical-align

Vertical-align - Легендарное свойство, которое вроде-бы и работает, но по факту - нет! Давайте разбираться, почему так происходит и что нужно, чтобы оно заработало

Многие все еще помнят те времена, когда в верстке повсеместно использовались таблицы, к ячейкам которых применялись:

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

По умолчанию все элементы центрируются по центру вертикальной оси и такой трюк поднимает все элементы внутри ячейки вверх. В CSS свойство vertical-align работает частично так же, но подчиняется трем правилам:

1. Применяется только к inline или inline-block элементам
2. выравнивает лишь элемент, к которому применяется, а его содержимое не трогает
3. в таблицах наоборот. влияет на содержимое, а ячейку не трогает


а это значит, что код ниже абсолютно ничего не делает, т.к. первый пункт не выполнен - не задан тип блока.

div {
vertical-align: middle; /* ничего не делает */
}

Ну а если нет возможности указать inline или inline-block блок, то на помощь всегда придут padding и margin. Пример ниже для не фиксированной высоты блока, где мы отступами отрегулируем оптимальную высоту и элементы останутся в центре и на этом конец.

.div{
font:1rem;
padding:5px 0; /* текст останется в центре */
}

Аналогично и с фиксированной высотой. Вручную ставим оптимальный отступ до тех пор, пока элементы не займут оптимальную позицию. Отличием от примера выше является то, что элементы не будут находиться по центру.


Понравилась статья "CSS - разбираемся почему не работает vertical-align" из раздела Веб разработка » HTML/CSS? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 1306   Дата: 28-июл-2015, 06:23

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика