Question

我的HTML：

<body>
    <div id="click-here">
        <a href="...">
            <span>Click here</span>
        </a>
    </div>
    ...
</body>

我的css：

html { 
    margin-top: 100px !important; 
}

#click-here { 
    height: 100px; 
    position: fixed; 
    top: 0;
    width: 100%; 
    z-index: 100000; 
}

#click-here a {
    background-image: url('...');
    display: block; 
    height: 60px; 
    width: 200px; 
    margin: 0 auto; 
    margin-top: 20px; 
    text-align: center; 
}

我想点击此处以一个元素为中心，该元素用作按钮。但是，它只是水平居中。我尝试了vertical-align：middle on anchor，但它没有用。我也尝试为span设置margin-top和padding-top，但这完全被忽略了。

知道我还能尝试什么吗？

Answer 1

您可以更改锚标记的行高。

#click-hear a{
    background-image: url('...');
    display: block;
    ****line-height:50px; 
    height: 60px; 
    width: 200px; 
    margin: 0 auto; 
    margin-top: 20px; 
    text-align: center; 
}

只需使用线条高度直到它居中。它应该给你想要的结果。

您还可以添加填充，但这会弄乱背景图像。

Answer 2

来自w3.org的

This example建议另外使用display:table-cell和vertical-align:middle进行此操作。

我经常使用这个解决方案，它一直很适合我。

Answer 3

使用display: table，display: table-cell和vertical-align: middle查看此jsfiddle：http://jsfiddle.net/PeSFh/。

垂直居中位置的文本：固定

3 个答案: