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     lt style gt           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      lt  style gt    lt  head gt    lt body gt    lt div id  header  gt       lt h1 id  sitename  gt Photography Auction Site lt  h1 gt        lt ul gt           lt li gt List of Photos lt  li gt           lt li gt Image Gallery lt  li gt           lt li gt Contact Us lt  li gt       lt  ul gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

Why not    header       text-align  center      header ul       display  inline

User · Answer

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

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

User · Answer

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

User · Answer

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

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

Examples related to html

Examples related to css

Examples related to margin