CODEWITHSUNDEEP
htmlcssbutton
Phil
Phil

Reputation: 205

Centering Button Text

How can I center the text, both vertically and horizontally, on these to buttons?

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

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

I've tried many different methods such as changing margin and padding but the text just won't move.

Upvotes: 0

Views: 107

Answers (1)

Moin Zaman
Moin Zaman

Reputation: 25435

setting your li or a to display:block and then using the property text-align:center will center horizontally.

To center vertically, try setting a height on the elements and using line-height:30px where 30px is the height you've set.

Upvotes: 3

Related Questions