Как вертикально центрировать случайные изображения неизвестных размеров

Question

Я искал решение для этой проблемы с CSS, но найденные решения, похоже, не работают в моей ситуации.

Я тяну случайные изображения от Flickr. Некоторые из них - портрет, некоторые - пейзажи. Когда выбранные снимки включают как портретные, так и альбомные изображения, я хочу, чтобы они были центрированы по вертикали.

Я прочитал, что

vertical-align:middle; 
display:table-cell; 

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

Я создал JSFiddle, чтобы показать мою проблему: http://jsfiddle.net/alexbfree/C35DR/2/

Можете ли вы помочь?

Alex

Answer 1

код с table-cell может сделать трюк, но вы должны удалить float свойство:

div.flickr_badge_image { 
    width:23.8%; 
    margin: 0 1.5% 1.5% 0; 
    /*float:left; Remove this*/ 
} 

Проверить это Demo Fiddle

Теперь, если вы хотите сохранить float вы также можете сделать это, чтобы центрировать теги a внутри:

div.flickr_badge_image:before { 
    content:" "; 
    display:inline-block; 
    height:100%; 
    background:red; 
    vertical-align:middle; 
} 
div.flickr_badge_image a { 
    display:inline-block; 
    vertical-align:middle; 
} 

Проверить Demo Fiddle2

Answer 2

К сожалению, я не могу комментировать пока.

Вы хотите что-то вроде этого?

<center> 
<div id="box-2148-0-0-0" class="module ui rounded embossed shadow yellow module-box"> 

http://jsfiddle.net/C35DR/4/