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>
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;
}
Why not?
#header {
text-align: center;
}
#header ul {
display: inline;
}
I don't know why the first answer is the best one, I tried it and not working in fact, as @kalys.osmonov said, you can give text-align:center to header, but you have to make ul as inline-block rather than inline, and also you have to notice that text-align can be inherited which is not good to some degree, so the better way (not working below IE 9) is using margin and transform. Just remove float right and margin;0 auto from ul, like below:
#header ul {
/* float: right; */
/* margin: 0 auto; */
display: inline-block;
margin-left: 50%; /* From parent width */
transform: translateX(-50%); /* use self width which can be unknown */
-ms-transform: translateX(-50%); /* For IE9 */
}
This way can fix the problem that making dynamic width of ul center if you don't care IE8 etc.
An inline-block covers the whole line (from left to right), so a margin left and/or right won't work here. What you need is a block, a block has borders on the left and the right so can be influenced by margins.
This is how it works for me:
#content {
display: block;
margin: 0 auto;
}
We can set the width for ul tag then it will align center.
#header ul {
display: block;
margin: 0 auto;
width: 420px;
max-width: 100%;
}
Source: Stackoverflow.com