0

使用 HTML/CSS 我想创建类似按钮的链接：

a.btnlink{
    border: 2px solid #808080;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    height: 50px;
    margin-bottom: 5px;
    padding: 2px;
    text-align: center;
    text-decoration: none;
    width: 200px;
}

这可以正常工作，但有一个例外：按钮框中的文本不是水平居中的（仅垂直居中）。

如何使文本在框中居中？
并且：我创建类似按钮的链接的方法是否正确，或者我可以更容易实现吗？

4

2 回答 2

2

试试这个：

a.btnlink
{
    border: 2px solid #808080;
    display: inline-block;
    height: 54px;            /* height & line-height values match */
    line-height: 54px;       /* causing vertical centering (for one-line string) */
    margin-bottom: 5px;
    width: 204px;
    text-align: center;      /* centers horizontally */
    text-decoration: none;
}
于 2013-05-25T00:19:44.833 回答
2

就像凯文提到的那样，display: inline-block可能是关键......

于 2013-05-25T00:20:26.043 回答