居中按鈕文本

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

我已經嘗試了許多不同的方法，如改變margin和padding只是不會移動文本。

Answer 1

將您的li或a設置爲display:block，然後使用屬性text-align:center將水平居中。

要垂直居中，請嘗試在元素上設置高度，並使用line-height:30px其中30px是您設置的高度。