CODEWITHSUNDEEP
javascriptjqueryhtmlcssalignment
Misha Moroshko
Misha Moroshko

Reputation: 171399

Cross browser div center alignment using CSS

What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I mean center alignment.

I thought to make the horizontal alignment using:

margin-left: auto;
margin-right: auto;

like I did here.

Is this a good cross browser solution for horizontal alignment ?

How could I do the vertical alignment ?

Upvotes: 25

Views: 43046

Answers (4)

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Check this Demo jsFiddle

Set following two things

  1. HTML align attribute value center

  2. CSS margin-left and margin-right properties value set auto

CSS

<style type="text/css">
     #setcenter{
          margin-left: auto;
          margin-right: auto;    
          // margin: 0px auto; shorthand property
     }
</style>

HTML

<div align="center" id="setcenter">
   This is some text!
</div>

Upvotes: 2

nickarmstronggr
nickarmstronggr

Reputation: 1

"If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience."

You could .hide() the div when the DOM is ready, wait for the page to load, set the div margin-left and margin-top values, and .show() the div again.

$(function(){
   $("#content").hide();
)};
$(window).bind("load", function() {
   $("#content").getDimSetMargins();
   $("#content").show();
});

Upvotes: 0

Misha Reyzlin
Misha Reyzlin

Reputation: 13916

"Vertical centering is only possible if the element is positioned absolutely and has a known height." – This statement is not exactly correct.

You can try and use display:inline-block; and its possibility to be aligned vertically within its parent's box. This technique allows you to align element without knowing its height and width, although it requires you to know parent's height, at the least.

If your HTML is this;

<div id="container">
    <div id="aligned-middle" class="inline-block">Middleman</div>
    <div class="strut inline-block">&nbsp;</div>
</div>

And your CSS is:

#container {
    /* essential for alignment */
    height:300px;
    line-height:300px;
    text-align:center;
    /* decoration */
    background:#eee;
}
    #aligned-middle {
        /* essential for alignment */
        vertical-align:middle;
        /* decoration */
        background:#ccc;
        /* perhaps, reapply inherited values, so your content is styled properly */
        line-height:1.5;
        text-align:left;
    }
    /* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
    #container .strut {
        /* parent's height */
        height:300px;
    }
.inline-block {
    display:inline-block;
    *display:inline;/* for IE < 8 */
    *zoom:1;/* for IE < 8 */
}

Then #aligned-middle will be centered within #container. This is the simplest use of this technique, but it's a nice one to be familiar with.

Rules marked with "/* for IE < 8 */" should be placed in a separate stylsheet, via use of conditional comments.

You can view a working example of this here: http://jsfiddle.net/UXKcA/3/

edit: (this particular snippet tested in ie6 and ff3.6, but I use this a lot, it's pretty cross-browser. if you would need support for ff < 3, you would also need to add display:-moz-inline-stack; under display:inline-block; within .inline-block rule.)

Upvotes: 7

BalusC
BalusC

Reputation: 1109132

Horizontal centering is only possible if the element's width is known, else the browser cannot figure where to start and end. 

#content {
    width: 300px;
    margin: 0 auto;
}

This is perfectly crossbrowser compatible.

Vertical centering is only possible if the element is positioned absolutely and has a known height. The absolute positioning would however break margin: 0 auto; so you need to approach this differently. You need to set its top and left to 50% and the margin-top and margin-left to the negative half of its width and height respectively.

Here's a copy'n'paste'n'runnable example:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2935404</title>
    </head>
    <style>
        #content {
            position: absolute;
            width: 300px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-left: -150px; /* Negative half of width. */
            margin-top: -100px; /* Negative half of height. */
            border: 1px solid #000;
        }
    </style>
    <body>
        <div id="content">
            content
        </div>
    </body>
</html>

That said, vertical centering is usually seldom applied in real world.

If the width and height are really unknown beforehand, then you'll need to grab Javascript/jQuery to set the margin-left and margin-top values and live with the fact that client will see the div quickly be shifted during page load, which might cause a "wtf?" experience.

Upvotes: 32

Related Questions