Блог

Как я могу центрировать текст, как по вертикали, так и по горизонтали, на этих кнопках?

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

Я пробовал много разных методов, таких как изменение полей и отступов, но текст просто не перемещается.

установка вашего li или a display:block и последующее использование свойства text-align:center будут центрироваться по горизонтали.

Для центрирования по вертикали попробуйте задать высоту элементов и использовать line-height:30px где 30 пикселей — это установленная вами высота.