/ / CSS vertikale Ausrichtung Problem in IE9 - HTML, CSS, HTML5, CSS3

Problem mit der vertikalen CSS-Ausrichtung in IE9 - html, css, html5, css3

Ich habe eine Schaltfläche mit Text (ich benutze Cuffon für den Text), die vertikal und horizontal zentriert sein muss. Text-Align funktioniert jedoch, aber die vertikale Ausrichtung funktioniert nicht.

Hier ist mein Div-Block:

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>

Jetzt ist die Schaltfläche mit dem Text "Download" vertikal zentriert mit Chrome, IE10 und höher und Firefox, aber nicht IE9.

Mögliche Fehler können sein font-size :13 px aber line-height:25px es gibt padding-top:10px; aber es ist auch vertikal zentriert.

Antworten:

-1 für die Antwort № 1

Ich denke, das wird funktionieren

#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. */
}

zusammen mit dem Rest deiner CSS natürlich.

* Nicht im IE getestet, aber genau in Chrome und Firefox funktioniert.