zeckdude zeckdude - 7 months ago 19
HTML Question

Why can't I center with margin: 0 auto?

I have a

#header
div that is
100% width
and within that div I have an unordered list. I have applied
margin: 0 auto
to the unordered list but it won't center it within the header div.

Can anybody please tell me why? I thought that if I define the width of the parent div, then the unordered list should be able to center itself with
margin: 0 auto
. What am I missing?

Here is my code:

<style>

* {
margin: 0;
padding: 0;
}

#header {
width: 100%;
background-color: #333;
min-height: 160px;
font-family:Arial, Helvetica, sans-serif;
}

#sitename {
font-size: 50px;
width: 620px;
margin:0 auto;
padding-top: 35px;
color:#999;
}

#header ul {
float: right;
margin: 0 auto;
}

#header ul li {
float: left;
padding-right: 20px;
list-style-type: none;
font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
<h1 id="sitename">Photography Auction Site</h1>

<ul>
<li>List of Photos</li>
<li>Image Gallery</li>
<li>Contact Us</li>
</ul>
</div>

</body>
</html>

Answer

You need to define the width of the element you are centering, not the parent element.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Edit: Ok, I've seen the testpage now, and here is how I think you want it:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}