Вертикальное выравнивание элемента ячейки таблицы в 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%; 

Это работает на обоих браузерах!