Align a div horizontal to center of the page

Question

I have this piece of html code:

<div id="main" style=" margin:0 auto; ">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>

And I want the #main div to be align in the center of the page. How cand I do this? Thanks!

http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page — webKite, Dec 11 '11 at 18:35

Cyclonecode · Accepted Answer · 2015-10-29T18:03:41.840

5

You must set a width for the div:

<div id="main" style="margin:0 auto; width:700px;">

I would also strongly suggest that you don't use inline css. Add something like this in a external stylesheet instead:

#main {
   margin:0 auto;
   width:700px;
}
#main a {
   display:block;
}
#main > div {
   float:left;
}

edited Oct 29 '15 at 18:03

answered Dec 11 '11 at 18:26

Cyclonecode

29,115
11
72
93

is there way do do this without setting the width? I want my div to be centered regardless it's width. – zuzuleinen Dec 11 '11 at 18:34
1

@zuzuleinen, only if you're using JavaScript to center it. Otherwise, you've gotta designate a width. – Naftuli Kay Dec 11 '11 at 18:36
I think you could get away with setting a `max-with` for your div. – Cyclonecode Jun 02 '12 at 08:51

score 2 · Answer 2 · edited Dec 11 '11 at 18:55

<body>
<div id="main" style=" margin:0 auto; width: 960px;">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>
</body>

score 2 · Answer 3 · answered Dec 11 '11 at 19:48

You mentioned in a comment to Krister Andersson you want the div to center no matter the width. But you have to give some kind of width info. If you want the div to be flexible width but centered then you need to set specific equal margins:

#main {
    margin: 0 50px; /* or whatever px, em, or % you want */
}

See http://jsfiddle.net/jBYZq/.

The point is, you have to either set the width of the element and use margin: 0 auto or set the margins of the element equal. But something has to be set to get it centered.

Align a div horizontal to center of the page

3 Answers3