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

Question

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:

* {
  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;
}

<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>

What browser are you using? IE/Win has some problems with Margin auto. — JD Frias, Jun 08 '09 at 06:28
Why do you also float your ul to the right? Take that out, and probably also the float:left for the li, and you should be fine. — Simon, Jun 08 '09 at 06:29
I am creating a navigation bar. I did take out the float right for the ul and put in a float left for the li, but that puts it all on the left now. — zeckdude, Jun 08 '09 at 06:35

score 149 · Accepted Answer · edited Jun 09 '14 at 07:36

149

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

edited Jun 09 '14 at 07:36

Mankarse

39,818
11
97
141

answered Jun 08 '09 at 06:29

PatrikAkerstrand

45,315
11
79
94

3

what if the width of the ul will be dynamic. I'm thinking of dynamically putting in different text in the li's with PHP later so I am trying to anticipate that. – zeckdude Jun 08 '09 at 06:34
3

Yup, then you can't center using margin: auto; – PatrikAkerstrand Jun 08 '09 at 06:36
your solution only pushes the ul to the right about 50px. It doesn't center it. Here's the page that I am working on: http://idea-palette.com/test.html – zeckdude Jun 08 '09 at 06:39
1

I tried your latest suggestion, but it didn't work. I have uploaded the newest version with your recommendations to the same location so you can see what I am experiencing. The ul is just being pushed to the right about 50px. – zeckdude Jun 08 '09 at 07:27
1

Like I said in my suggestion, remove the float: left – PatrikAkerstrand Jun 08 '09 at 08:20
1

That worked GREAT! Thank you sooo very much for sticking with me and helping me out! That problem has been killing me! Thanks again! – zeckdude Jun 08 '09 at 08:39
You should be able to center dynamic elements. Responsive elements defined in percentages or ems can be centered with `margin: auto`. The elements just need to be block elements and have some width. I've made `margin: auto` suddenly work by adding a width and/or by adding `display: block`. – Michael McGinnis Dec 10 '14 at 20:33
please add "display: block;" if it's inline-block or something else, it doesntwork – Felipe Quirós May 27 '15 at 21:19
@MichaelMcGinnis I think the dynamic elements referred to by zeckdude are elements whose width is defined by their content. Yes, an element with a percentage width is responsive, but not dynamic in so far that it has a defined width: x %. – Luke Aug 07 '17 at 01:54

score 57 · Answer 2 · edited Jun 09 '14 at 07:37

57

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

edited Jun 09 '14 at 07:37

Mankarse

39,818
11
97
141

answered Apr 07 '13 at 17:45

Hoeks

587
4
2

Thank you for very useful suggestion, I had the same problem with an inline element and I couldn't figure out why it wasn't working – mastazi Oct 29 '13 at 11:49
1

This is best answer, and works for multi size window. – Yuda Prawira Dec 31 '13 at 13:59

score 15 · Answer 3 · edited Jun 09 '14 at 07:36

15

Why not?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

edited Jun 09 '14 at 07:36

Mankarse

39,818
11
97
141

answered Aug 24 '10 at 05:41

kalys.osmonov

504
3
14

I added text-align: left; to #header ul to center the ul and keep the text in the li aligned to the left. I also needed to set the ul to display as inline-block for the width to be dynamic (auto). – Brent Self Jul 24 '14 at 13:16

score 3 · Answer 4 · answered Jun 16 '17 at 06:46

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.

score 0 · Answer 5 · answered Aug 22 '18 at 07:13

0

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

answered Aug 22 '18 at 07:13

Vani S

1

score 0 · Answer 6 · edited Mar 03 '23 at 23:31

0

Use this CSS to center a div in absolute position. Here, replace container with a selector for your container.

container { 
  left: 50%;
  transform: translateX(-50%);
}

edited Mar 03 '23 at 23:31

Michael M.

10,486
9
18
34

answered Feb 27 '23 at 19:38

Ali Valiant

1
1

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

6 Answers6

Linked

Related