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 :
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.
©thanix.info 2012 | RSS | cc share-alike
thanix [at] gmail [dot] com