CSS text-align center is not centering things

Question

I have the following html   lt div id  quot footer quot  gt       lt ul id  quot menu-utility-navigation quot  class  quot links clearfix quot  gt           lt li class  quot menu-685 menu-site map first quot  gt Site Map          lt  li gt           lt li class  quot menu-686 menu-privacy policy quot  gt Privacy Policy          lt  li gt           lt li class  quot menu-687 menu-terms   conditions quot  gt Terms  amp amp  Conditions          lt  li gt           lt li class  quot menu-688 menu-contact us last quot  gt Contact Us          lt  li gt       lt  ul gt   lt  div gt   With the following CSS  div footer       font-size  10px      margin  0 auto      text-align  center      width  700px     I threw in the font-size bit just to see if the style was working  Firebug reports it is working but I wanted to see    It is working   But the text is not centered in the footer in Firefox or in Safari  have yet to check it in IE   I tried with and without margin  0 auto  and with and without text-align  center  no combo of those things worked  Here is output from Firebug  div footer       font-size  10px      margin  0 auto      text-align  center      width  700px     Inherited fromdiv page  skip-to-nav   page       line-height  1 5em     Inherited frombody html body       color   666666      font-family  verdana arial sans-serif     Help

User · Answer

To make a inline-block element align center horizontally in its parent  add text-align center to its parent

User · Answer

Use display  block  margin  auto  it will center the div

User · Answer

I don t Know you use any Bootstrap version but the useful helper class for centering and block an element in center it is  center-block because this class contain margin and display CSS properties but the  text-center class only contain the text-align property  Bootstrap Helper Class center-block

User · Answer

This worked for me       e Row Cells  cell no    HorizontalAlign   HorizontalAlign Center    But  css text-align   center   didn t worked for me   hope it will help you

User · Answer

I assume you want all the items next to each other  and the whole thing to be centered horizontally   li elements are display  block by default  taking up all the horizontal space   Add  div footer ul li   display  inline     once you ve done that  you probably want to get rid of the list s bullets   div footer ul   list-style-type  none  padding  0px  margin  0px

User · Answer

If you want the text within the list items to be centred  try   ul menu-utility-navigation     width  100      ul menu-utility-navigation li     text-align  center

User · Answer

You can use flex-grow  1  The default value is 0 and it will cause the text-align  center looks like left   https   css-tricks com almanac properties f flex-grow

[css] CSS text-align: center; is not centering things

Examples related to css

Examples related to text-align