Для лучшего понимания рекомендуется просматривать эту страницу в IE 8 =).

Для вертикального выравнивания изображений внутри блоков (красная граница) используется css-свойство display:table-cell. Ширина изображений ограничена свойством max-width. При этом, в IE 8, несмотря на изменение (уменьшение) ширины больших рисунков, ширина контейнера рассчитывается исходя из "реальной" ширины рисунка.

Вернуться к статье

Реальная ширина изображения

решение 1: добавляем внешний блок (display:table) со свойством table-layout:fixed; и шириной равной ширине

решение 2: добавляем внутренний блок ("обёртка" для изображения) с нужной шириной (максимальной шириной изображения)


Как "это" смотрится на "плавающих" элементах (пользователи альтернативных браузеров разницы не заметят):


и версия с "фиксами" ( как было задумано изначально)


Вернуться к статье