Firefox中表格单元格的垂直对齐并不起作用

Question

我必须将文本单元格与JSP文件中的图像单元格对齐。 jsp片段是：

<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中，结果是：

并且文本在顶部对齐。 我从开发人员的角度看到解决方案可能是：

<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文件中这样做？

Answer 1

我决定更换

vertical-align: middle;

带

padding-top: 50%;

这适用于两种浏览器！