Wednesday 28 March 2012

Centring DIV elements

Here's a HTML structure and required CSS:

<div id="container">
  <div class="centered">This is centered div</div>
</div>
#container { text-align:center;}
.centered { margin:0 auto; width:80%; } /* Set the width according to your needs */

Applying "margin: 0 auto;" would be sufficient in a world without IE. In order to get centred div element in IE, you have to set "text-align: center;" for parent element. That parent element could be another div (just like in example), body element (then style definition would be "body {text-align: center}") or anything else. There's also a lot more detailed explanation of this approach here, but I'm too lazy to read the whole article :(.

Already knew this? Good for you! I did have to spend some time reading discussions and long descriptions about this, but didn't find a single concise "here's a solution - copy, paste, and enjoy" answer.

Are there any drawbacks of this method? Haven't found such yet. If you know something that I'm not aware of, please, let me know this in comments.

Are there any alternatives? Yes:

  • I've seen (and used) alternatives where DIV element is being included into a table which is centred. But it is not recommended approach since page structure should be built using DIVs. I know - it's a challenging task, but that's an idea I've got from different discussions.
  • Also I've found a discussion where a fixed-width DIV gets positioned at the centre of parent element and then a negative margin is applied (haven't tried this one, but looks promising). Here's a CSS:
    .centered{
      width: 500px;
      position: relative;
      left: 50%;
      margin-left: -250px; /* half the width of the div */
    }

2 comments:

  1. thanks.. this worked for centering div. I also had some other probs like min-height, and i found another solution that fixed also centering issue; i dont need text-align:center nomore.

    Solution was quite simple:


    :)

    that should be the fist line in your html file.. i guess its okey as far its before html tag.

    ReplyDelete
    Replies
    1. stupid blog-software.. dropped my html tags:
      _!DOCTYPE html_

      where _ is square bracket ..you know < >

      anyway solution was found from stackoverflow:
      http://stackoverflow.com/questions/5968779/how-to-make-ie-support-min-width-max-width-css-properties

      Delete