Проблема вертикального выравнивания CSS в IE9

Question

У меня есть кнопка с текстом (я использую Cuffon для текста), который должен быть по вертикали и по горизонтали. Однако text-align работает, но вертикальное выравнивание не работает.

Вот мой DIV блок:

btndownload 
{ 
    background-color: #512c1d; 
    background: url('../Images/Btn_Brwn.png'); 
    background-size: 103px 32px; 
    color: #B6BD00; 
    width: 103px; 
    font-family: 'Century Gothic'; 
    font-size: 13px; 
    font-weight: bolder; 
    border: 0 solid #512c1d; 
    margin-top: 6px; 
    height: 32px; 
    cursor: pointer; 
    text-align: center; 
    vertical-align: middle; 
    text-shadow: none; 
    padding-top:10px; 
    margin-right: -16px; 
    line-height:25px; 
} 

<div id="btnDownload" title="Download Image" class="btndownload"> 
    <cufon class="cufon cufon-canvas" alt="DOWNLOAD" style="width: 72px; height: 13px;"> 
    <canvas width="77" height="13" style="width: 77px; height: 13px; top: 1px; left: -1px;"> 
    </canvas><cufontext>DOWNLOAD</cufontext></cufon> 

Теперь кнопка с "Загрузить" текст центрирован Chrome, IE10 и выше, и Firefox, но не IE9.

Возможные ошибки могут быть font-size :13 px, но line-height:25px padding-top:10px; но он также вертикально центрирован.

Answer 1

Я думаю, что это будет работать

#btnDownload { 
     position: absolute; 
     width: 300px; 
     height: 200px; 
     top: 50%; 
     left: 50%; 
     margin-left: -150px; /* Negative half of width. */ 
     margin-top: -100px; /* Negative half of height. */ 
} 

вместе с остальной частью вашего CSS Ofcourse.

* Не тестировался в IE, но работал точно как в хромированном, так и в firefox.