- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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 ?
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.
Usually you specify the line-height with the height of the element. That would make it align vertically.
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.
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.