Question

使用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;
}

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

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

Answer 1

请改为尝试：

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;
}

Answer 2

凯文提到，display: inline-block可能是关键......

如何在box元素中水平和垂直居中文本？

2 个答案: