Вертикально выровнять изображения кросс-браузера - Firefox bug

Question

Это сложно объяснить, см. Скрипку here. Работает в Chrome, а не в Firefox.

Мне нужно отобразить несколько изображений в контейнере фиксированного размера и по вертикали выровнять их по центру. Я следовал примерам, приведенным в этом вопросе (How to vertically align an image inside div), который отлично работает. Но использование этого в моей разметке не работает в Firefox.

В зависимости от контекста изображения HTML-разметка может быть немного иначе:

Например:

работы:

<div class="print-wrap"> 
    <ul> 
     <li class="img"> 
      <span class="img-valign-helper"></span> 
      <img class="ls img-valign" src="http://placehold.it/200x105"> 
     </li> 
    </ul> 
</div> 

Не работает:

<div class="print-wrap has-size"> 
     <ul> 
      <li class="img"> 
       <div class="table"> 
        <div class="table-cell-50 img-wrap"> 
         <span class="img-valign-helper"></span> 
         <img class="ls img-valign" src="http://placehold.it/200x105"> 
        </div> 
        <div class="table-cell-50 info-wrap">content</div> 
       </div> 
      </li> 
     </ul> 
    </div> 

Глядя на это в Firebug, я вижу, что <span class="img-valign-helper"></span> немного серое - я не уверен, что это значит?

В результате изображение вертикально к вершине. Таким образом, img-valign-helper не работает. Тем не менее работает отлично в Chrome. Я ничего не вижу в своей разметке html, которая может привести к ее разрыву. css почти идентичен.

Что здесь общего не работает?

Answer 1

Вам необходимо добавить height: 100%; в ваш .table-cell-50. Таким образом, он может пройти через высоту до вашего вспомогательного пролета.

Updated fidddle