垂直對齊圖像跨瀏覽器 - 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