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, но рабочими способами борьбы с ним интернет завален.

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