Patrick’s development blog

centering a <div> using CSS

Posted in Articles, Webdesign by Patrick on February 14, 2008

Centering something in HTML/XHTML isn’t a matter of course anymore. That doesn’t mean it’s anywhere hard, but designers get to know more and more about web standards nowadays and constantly struggles with web browsers that are a little deviant *cough* (Internet Explorer).

In the good old days, most people would probably attempt to center something using the <center> tag (I know this is the stone age). I’m not sure if it’s just that nobody cared back then, but nowadays it’s not a part of the standard. In my option, designing websites consists mostly of creating ugly hacks so the website works fairly well with most browsers, this is quite sad.

Anyways, this is what i’ve come across about how to center div’s using CSS.


#contents {
width: 400px;
margin-left: auto;
margin-right: auto;
}

<div id=”contents”>
Insert text/image/whatever here..
</div>

This would naturally be everything we would need in order to center the
<div> tag. Some browsers just behave differently (like Internet Explorer) though. That’s why we have to add text-align: center; into the body section of the CSS code. This will also center the text in the div so we will have to counter that by adding text-align: left; into the #contents id.

Centering a div using CSS


body {
text-align: center;
}

#contents {
text-align: left;
width: 400px;
margin-left: auto;
margin-right: auto;
}

<div id=”contents”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

The width attribute was put there in order to get a constant size of the box. It would look ridicilious other way. Now the contents box will be centered horizontally.

Advertisements

3 Responses

Subscribe to comments with RSS.

  1. Rehan Anis said, on May 12, 2008 at 6:01 am

    I didn’t worked for me.
    I have tried adding a new div over the div I want to center align and see the result. nothing happened.
    Then I removed the extra one, and put the above code in the same div. no results either.

  2. patrickbe said, on May 13, 2008 at 10:14 am

    That’s weird. Try to make a document with the following code:

    body {
    text-align: center;
    }

    #contents {
    text-align: left;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    }

    <div id=”contents”>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>

    Don’t forget that this code only centers the layer horizontally, not vertically.

  3. kennyg said, on July 3, 2008 at 10:26 pm

    Worked perfect for me, I would’ve never thought of that. Thanks for being an antidote for MS IE!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: