Vertical-align A Div

This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :

' clas

Solution 1:

So, I'm guessing that the content area height is not very static.

http://jsfiddle.net/aBzhu/

Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;

Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.

Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+

Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen

Solution 2:

vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.

Solution 3:

This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..

.verticalCenterDivText{
        height: 29px;
        line-height: 29px;
    }

Hope this helps....

Regards, ADynaMic

Share