HowTo CSS Vertical Alignement

From Frederick Chapleau Wiki

Jump to: navigation, search

Contents

How To =

Vertical alignement in CSS 2 is not available, however, there is a (dirty) way to do it, by the time that CSS 3 include the simple vertical-align method.

The Code

CSS 

DIV #contentPlaceHolder
{
    position: absolute;
    text-align: center;
    top: 25px;
    left: 0px;
    width: 90px;
    height: 85px;
}
DIV #outerContent
{
    #position: absolute;
    #top: 50%;
    #left: 50%;
    display: table-cell; 
    vertical-align: middle;
}
DIV #innerContent
{    
    position: relative; 
    top: -50%;
    left: -50%;
}

HTML 

<div id="contentPlaceHolder">
       <div id="outerContent">
           <div id="innerContent">
           </div>
       </div>
</div>
Retrieved from "http://www.chapleau.info/wiki/HowTo_CSS_Vertical_Alignement"
Personal tools