how to vertically center an element?

[janghuan]

I’m often confused by this.
E.G. Can u solve it?
html:

...

Something here


...

css:

li	 { padding-left:30px; background:url(icon.png) no-repeat left center; } //the icon.png 16*16px

How can i align the “a” with the background image “icon.png” or is there a height for the “li”?
So is there a keyword for vertically center like text-align:center ?

[sliver37]

From what I understand you want the text to line up vertically centered with the icon?

For text to line up vertically you can use the “line-height” parameter, you basically just use the same amount of line-height as the height of what you are trying to center. Example: If you had something 30px tall and you wanted text to line up perfectly centered you would add 30px line-height.

li  { padding-left:30px; background:url(icon.png) no-repeat left center; } //the icon.png 16*16px



li a { line-height: 16px; }

I am really tired at the moment so my explanations are probably horrible. Hope this is what you were after, I’ll check back on this post tomorrow.

Cheers.

[chrisburton]

Usually you specify the line-height with the height of the element. That would make it align vertically.

[Johnnyb]

A more versatile way to do that, where you don’t have to manually change the line-height for every element you want to vertically align, is to measure the height of the list item using jquery and then adjust the padding-top to be (listHeight/2 – linkFontSize). It’s simple enough to implement and then it can be used it across any element you wish without having to use inline styles or separate classes.

[janghuan]

Thx silver37,I got what you mean.line-height’s perfect solution to me after when i understand it.it actully centered the a element.
and for johnnyb’s way,i am not familiar with jQuery，so that’s an option for me.
Thanks.

[Author]

Posts