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一起。

*未在IE中测试过，但在chrome和firefox中都能正常工作。

IE9中的CSS垂直对齐问题

1 个答案: