CODEWITHSUNDEEP
css
Dynamiite
Dynamiite

Reputation: 1499

CSS Vertically align text inside image button

Im having trouble vertically aligning text inside a image button. Vertical-align: middle doesnt seem to work.

Here what i got so far:

#navbar ul {
    padding-top: 10px;
    float:left;
}

#navbar li {    
    background-image:url("../images/btns.png");
    width: 78px;
    height:32px;
    float:left;
    text-align: center;
    font-size: 12px;
    list-style:none;
    vertical-align: middle;
}

Upvotes: 0

Views: 3054

Answers (3)

PSL
PSL

Reputation: 123739

Simplest way to fix this is to give a line-height for the li same as that of its own height.

http://jsfiddle.net/KHBG4/

#navbar ul {
     padding-top: 10px;
     float:left;
 }
 #navbar li {
     background-image:url("http://placehold.it/78x32");
    float:left;
     width: 78px;
     height:32px;
     text-align: center;
     font-size: 12px;
     list-style:none;
     line-height:32px;
 }

Upvotes: 4

VoidKing
VoidKing

Reputation: 6412

vertical-align can only be used with inline elements. That having been said, I know img tags are "inline-block" so not really sure what to expect there, but I don't think you mean to vertically align the img, but rather the text, so you need a separate inline tag (span would do fine) and use "position" and "vertical-align" to set it up right.

I have had a recent post about that very issue here:

How can I resize a background-image to fit my element (without set width) in CSS 2?

Upvotes: 1

Dave
Dave

Reputation: 29121

I would suggest the simplest route of giving your button padding-top (and reducing it's height by that number of course).

It's not truly "auto-centered", as it won't be centered if you change the height without updating the padding, but - it works and it's clean and easy, and simple to update.

Upvotes: 0

Related Questions