Vertical alignment of table cell element in Firefox doesn't work

Question

I have to align a text cell to an image cell in a JSP file. The jsp fragment is:

<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>

In Chrome and IE browsers the result is this:

with the image and the text aligned in the middle of the table.

In Firefox instead the result is:

and the text is aligned on the top. I saw from the developer consolle that the solution could be:

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

for Chrome and IE, but

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

for Firefox. How could I do this in the JSP file?

Answer 1

I resolved replacing

vertical-align: middle;

with

padding-top: 50%;

This works on both browsers!