Vertically allign in CSS
I’ve just been tring to align an image with some text next to it in a div, the the is it would make the text jump to the bottom of the image. Obviously this mad me mad! Grrr I’ve meny times had to do this, but I thought I would share this fix with you all, so here is a little work around that you can use to get around the issue of vertically aligning objects in a webpage.
.nameofdiv {
line-height:37px;
}
.nameof img {
vertical-align:middle;
}
As you can see the image is 37px high, so by setting the line height to the same height as the image, it makes it look like the html text and the image are alligned in the div vertically correct.
This is a great way to fix menu items in <li>’s without breaking the laws of valid XHTML and CSS
Note: You need to have one line of text in the DIV for this to work. If you have 2 lines, it won’t look correct. For examples of differnt ways of using the above code see this link. It has a good few quality examples obviously with all the code in the source for you to examine at your own free will.
