Firefox中表格單元格的垂直對齊不起作用

我必須將文本單元格與JSP文件中的圖像單元格對齊。的JSP片段是：Firefox中表格單元格的垂直對齊不起作用

<div class="col-sm-12"> 
    <div class="col-xs-12 col-sm-4"> 
     <arch:fondoListerGridItem serie="${serie}" fondo="${fondoPageData}" /> 
    </div> 
    <div class="col-sm-4 "> 
     <div style="display: table;position: absolute;height: 33%;width: 100%;"> 
     <div style="display: table-cell;vertical-align: middle;"> 
     <p> 
      <b><spring:theme code="text.fondo" />:</b> ${fondoPageData.fondo}<br> 
      <b><spring:theme code="text.serie" />:</b> ${serie.titolo} 
     </p> 
     </div></div> 
    </div> 
</div>

在Chrome和IE瀏覽器的結果是這樣的：

與圖像，並在表的中間對齊的文本。

在Firefox，而不是結果是：

和文字的頂部對齊。我從開發商consolle看到的解決辦法是：

<div style="display: table;position: relative;height: 33%;width: 100%;"> 
<div style="display: table-cell;vertical-align: middle;">

Chrome和IE，但

<div style="display: table;position: relative;height: 33%;width: 100%;"> 
<div style="display: table-cell;vertical-align: bottom;">

爲Firefox。我怎麼能在JSP文件中做到這一點？

來源

2017-02-10 sharkbait

你能提供一個證明問題的[mcve]嗎？另外，Firefox是否真的顯示不同於Chrome的文本？ –

https://jsfiddle.net/5wwyevLd/ – sharkbait

這兩個瀏覽器中的小提琴看起來都是一樣的，這與截圖中的任何一個都不一樣。 –

我解決了與

padding-top: 50%;

這適用於這兩種瀏覽器更換

vertical-align: middle;

！

來源

2017-02-10 16:57:26 sharkbait

Firefox中表格單元格的垂直對齊不起作用

回答

相關問題