html - 居中按钮文本

Question

我怎样才能使文本在这些按钮上垂直和水平居中？

<li id="settings"><a href="settings.html">Settings</a></li>
<li id="logout"><a href="#">Logout</a></li>

使用这个 CSS:

  /** Buttons **/

#logout{
    height:24px;
    width:80px;
    background-image:url('/gamma/common/images/logoutbg.png');
    background-repeat:no-repeat;
    margin-top: 6px;
}

#settings{
    height:25px;
    width:84px;
    background-image:url('/gamma/common/images/settingsbg.png');
    background-repeat:no-repeat;
    margin-top: 6px;
    padding-bottom: 25px;
}

#settings a, #logout a{
    text-decoration: none;
    padding-left: 10px;
    margin-bottom: 20px;
    padding-top: 0px;
}
#logout a{
color: #344551;
vertical-align: middle;
font-size: 11px;
}
#settings a{
color: #FFF;
vertical-align: middle;
font-size: 11px;
}

我尝试了很多不同的方法，例如更改边距和填充，但文本就是不动。

Answer 1

将 li 或 a 设置为 display:block 然后使用属性 text-align:center将水平居中。

要垂直居中，请尝试在元素上设置高度并使用 line-height:30px，其中 30px 是您设置的高度。