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是您设置的高度。

居中按钮文本

1 个答案: