Stay Connected

Table layout sucks... but I do miss valign

Posted on June 9th, 2009 by Adam Nannini

With margin: 0 auto; it’s pretty easy to center content horizontally, but it’s a pain without tables to center content vertically inside either a container or the window. Here’s a pretty simple CSS method I found. In this example, we’ll be centering in the browser window, but this can be applied inside a container as well.

The trick with this approach is that the container and the centered element must have some height set. Apart from this drawback, this method seems to work great across browsers and is fantastically simple. Enjoy.

The HTML

<html>
    <body>
        <div id=”distance”></div>
        <div id=”centered_element”>
            Here’s some centered content for you.
        </div>
    </body>
</html>

The CSS

html, body
{
height:100%; /* Height must be set on the container for proper centering. */
}
#distance
{
height:50%;
margin-bottom:-9px; /* Half of centered element’s height */
}
#centered_element
{
margin: 0 auto;
width: 200px;
height:18px;
}
Filed in: Web Magic


Leave a Reply

  

  

  

Stay Connected