CSS. vertical-align vs. float

Сегодня изрядный кусок дня я посвятил вертикальному выравниванию картинки внутри тега <div>. Как всегда интернет полон примеров типа:

.algn {
display: table-cell;
vertical-align: middle;
text-align: center;
}

И как обычно у меня ничего не работает 🙂 И традиционно причина и решение проблемы элементарны.

Все дело в том что мой div кроме всего прочего еще и float: left. А, как выяснилось, если у элемента свойство float отличается от none, то про vertical-align можно забыть. Ну и решение: заворачиваю <div class="algn"> ... </div> в еще один контейнер: <div style="float: left;"> и наслаждаемся видом отцентрированной картинки.

Традиционно выпендривается IE, но рабочими способами борьбы с ним интернет завален.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*