thanix.info

CSS: Vertical centering Image and Block of text

Anyone who has been doing UX coding for a while would have realized that the designers love to vertical center anything and everything on the page; this vertical centering in the early days had been an area where developers spent quite a lot of time and effort, achieving it to work across all the browsers. I’m certain that CSS developers who had trouble would be familiar with the vertical centering techniques at
lost in the woods, css-tricks and david walsh

Quite often, one might run into the requirement of vertical centering a block of text (no matter what it’s height is) against an image, like this:

I think the simplest technique to acheive this to work across browsers is to use

 
display: inline-block; 
vertical-align: middle; 

You may be quite surprised to see how well supported this display: inline-block is. Here is the support for inline-block as it stands today:

Here is the code depicting how display: inline-block is to achieve the vertical centering as desired :

Image and text alignment!

Note that this technique is fairly usable even with IE6 and IE7 by using a hack *display: inline; i.e., just below display: inline-block; just insert *display: inline; and it would work just fine in IE6, IE7.