Вертикальное выравнивание изображения в блоке

[esche]

Здравствуйте.

Изначально стояла задача центрирования изображения по вертикали и по горизонтали внутри блока. Таких блоков с изображениями несколько, соответственно, ширина и высота изображений может различаться. Ширина и высота блоков фиксированная, известна заранее.

Для горизонтального выравнивания использую - text-align:center;

Для вертикального выравнивания используется display:table-cell;verticl-align:middle

Для ограничения по ширине/высоте изображения (если изображение выходит за пределы блока, уменьшаем) max-width, max-height

Два последних условия продублированы expression-ами для IE6

Однако, в случае использования max-width внутри блока с display:table-cell ширина последнего растягивается до размера изображения в пикселях (до ресайза по max-width)

Дабы было понятнее о чем говорю (без ie6-хаков):

http://www.levik.info/test/display-cell.html

Подскажите, что изменить, чтоб ширина ячеек не "ползла"?

Или альтернативный вариант вертикально-горизонтального выравнивания в блоке.

ps. Вариант с "жестким" прописыванием ширины изображения в HTML-коде ( <img width="") хотелось бы исключить, потому как ширина и пропорции изображений разные (т.е. , возможно, рисунок, вытянутый вертикально, будет занимать не всю ширину блока), а хранить данные по всем картинкам не хоцца (хотя, возможно, и правильно)

[Vlad]

В данном случае удобнее будет display: inline-block использовать. Плюсов несколько: ширина автоматом вычисляется, можно выравнивать по центру, блоки выстраиваются по горизонтали, высоту и ширину при необходимости также можно задать. С IE будут проблемы, но это тоже давно обходится

  <style type="text/css">
   DIV { 
	display: inline; /* Строчный элемент */
	zoom: 1; /* Устанавливаем hasLayout */
   }
  </style>

[esche]

В данном случае удобнее будет display: inline-block использовать. Плюсов несколько: ширина автоматом вычисляется, можно выравнивать по центру, блоки выстраиваются по горизонтали, высоту и ширину при необходимости также можно задать. С IE будут проблемы, но это тоже давно обходится

Не совсем понял, чем именно удобнее inline... Или мы о разном...

Визуально, блок - это что-то вроде "рамки" для изображения.

Вычисление ширины блока не нужно - ширина блока задана, она фиксированная.

И как задать вертикальное выравнивание изображения по центру в inline-блоке?

[Vlad]

Вот здесь описано похожее решение.

http://habrahabr.ru/blogs/css/71236/

[esche]

Вот здесь описано похожее решение.

http://habrahabr.ru/blogs/css/71236/

Спасибо за ссылку.

Красивое решение. Жаль только, что с DOCTYPE Transitional не работает.

Сам нашел и причину такого глюка (новый "передовой движок" IE8) и как его обойти (примеры по ссылке в первом сообщении)