我有一个带有文本的按钮(我使用 Cuffon 作为文本)必须垂直和水平居中。但是,文本对齐有效,但垂直对齐无效。
这是我的 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>
现在带有“下载”文本的按钮在 Chrome、IE10 及更高版本和 Firefox 中垂直居中,但在 IE9 中不是。
可能的错误可以是 font-size :13 px
但是 line-height:25px
有 padding-top:10px
;但它也是垂直居中的。
最佳答案
我觉得这行得通
#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 的其余部分。
*未在 IE 中测试,但在 chrome 和 firefox 中都能正常工作。
关于html - IE9 中的 CSS 垂直对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20690454/