CSS text-align not working

Question

I have this css code here   navigation      width 100       background-color  7a7a7a      font-size 18px      navigation ul       list-style-type  none      margin  0      navigation li       float  left       navigation ul a       color   ffffff      display  block      padding  0 65px 0 0      text-decoration  none      What I am trying to do is center my class navigation  I tried using text-align center  and vertical-align middle  but neither of them worked   and here is the HTML Code   lt div class  navigation  gt   lt ul gt   lt li gt  lt a href  http   surfthecurve ca   gt home lt  a gt  lt  li gt   lt li gt  lt a href  http   surfthecurve ca  page id 7  gt about lt  a gt  lt  li gt   lt li gt  lt a href  http   surfthecurve ca  page id 9  gt tutors lt  a gt  lt  li gt   lt li gt  lt a href  http   surfthecurve ca  page id 11  gt students lt  a gt  lt  li gt   lt li gt  lt a href  http   surfthecurve ca  page id 13  gt contact us lt  a gt  lt  li gt   lt  ul gt   lt  div gt  lt  --navigation-- gt    When I say its not working  I mean the text is aligned to the left

User · Answer

You have to make the UL inside the div behave like a block  Try adding   navigation ul        display  inline-block

User · Answer

I try to avoid floating elements unless the design really needs it  Because you have floated the  lt li gt  they are out of normal flow   If you add  navigation   text-align center    and change  navigation li   float  left    to  navigation li   display  inline-block    then entire navigation will be centred   One caveat to this approach is that display  inline-block  is not supported in IE6 and needs a workaround to make it work in IE7

User · Answer

Change the rule on your  lt a gt  element from    navigation ul a       color   000      display  block      padding  0 65px 0 0      text-decoration  none       to   navigation ul a       color   000      display  block      padding  0 65px 0 0      text-decoration  none      width 100       text-align center       Just add two new rules  width 100   and text-align center    You need to make the anchor expand to take up the full width of the list item and then text-align center it   jsFiddle example

[css] CSS text-align not working

Examples related to css

Examples related to text-alignment

Examples related to text-align