Search code examples
htmlcssalignment

Align a div horizontal to center of the page

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!

Solution

  • 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;
}