How do I center align horizontal UL menu

Question

I need to center align a horizontal menu  I ve tried various solutions  including the mix of inline-block   block   center-align etc   but haven t succeeded   Here is my code    lt div class  topmenu-design  gt       lt  -- Top menu content  START -- gt       lt ul id  topmenu firstlevel  gt                                                                                                lt li class  firstli  id  node id 64  gt  lt div gt  lt a href     gt  lt span gt Om kampanjen lt  span gt  lt  a gt  lt  div gt  lt  li gt         lt li id  node id 65  gt  lt div gt  lt a href     gt  lt span gt Fakta om inneklima lt  span gt  lt  a gt  lt  div gt  lt  li gt         lt li class  lastli  id  node id 66  gt  lt div gt  lt a href     gt  lt span gt Statistikk lt  span gt  lt  a gt  lt  div gt  lt  li gt       lt  ul gt       lt  -- Top menu content  END -- gt   lt  div gt    UPDATE  I know how to center align the ul within the div  That can be accomplished using Sarfraz s suggestion  But the list items are still floated left within the ul   Do I need Javascript to accomplish this

User · Answer

Do it like this        lt div id  footer  gt           lt ul gt               lt li gt  lt a href   1 html  gt Link 1 lt  a gt  lt  li gt               lt li gt  lt a href   2 html  gt Link 2 lt  a gt  lt  li gt               lt li gt  lt a href   3 html  gt Link 3 lt  a gt  lt  li gt               lt li gt  lt a href   4 html  gt Link 4 lt  a gt  lt  li gt               lt li gt  lt a href   5 html  gt Link 5 lt  a gt  lt  li gt           lt  ul gt      lt  div gt    And the CSS    footer       background-color  ccc      height 39px      line-height 36px      margin 0 auto      text-align center      width 950px      footer ul li       display inline      font-family Arial sans-serif      font-size 1em      padding 0 2px      text-decoration none

User · Answer

I used the display inline-block property  the solution consist in use a wrapper with fixed width  Inside  the ul block with the inline-block for display  Using this  the ul just take the width for the real content  and finally margin  0 auto  to center this inline-block       ul wrapper    gallery wrapper          width           958px          margin          0 auto        ul list   ul gallery carrousel          display         inline-block          margin          0 auto     contenido secundario li          float           left

User · Answer

This works for me  If I haven t misconstrued your question  you might give it a try    x000D   x000D      div centerDiv   x000D          width  100   x000D          text-align  center  x000D          border  1px solid red  x000D        x000D      ul centerUL   x000D          margin  2px auto  x000D          line-height  1 4  x000D          padding-left  0  x000D        x000D       centerUL li   x000D          display  inline  x000D          text-align  center  x000D        x000D   lt div id  centerDiv  gt  x000D       lt ul class  centerUL  gt  x000D           lt li gt  lt a href  http   www amazon com  gt Amazon 1 lt  a gt  amp nbsp  amp nbsp  lt  li gt  x000D           lt li gt  lt a href  http   www amazon com  gt Amazon 2 lt  a gt  amp nbsp  amp nbsp  lt  li gt  x000D           lt li gt  lt a href  http   www amazon com  gt Amazon 3 lt  a gt  lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Generally speaking the way to center a black level element  like a  lt ul gt   is using the margin auto  property   To align text and inline level elements within a block level element use text-align center   So all together something like     ul       margin auto    ul li       text-align center      list-style-position inside     so that the bullet points are also centered      ul li div       display inline     so that the bullet points aren t above the content            should work   The fringe case is Internet Explorer6    or even other IEs when not using a  lt  DOCTYPE gt   IE6 incorrectly aligns block level elemnts using text-align  So if you re looking to support IE6  or not using a  lt  DOCTYPE gt   your full solution is     div topmenu-design       text-align center    div topmenu-design ul       margin auto    div topmenu-design ul li       text-align center      list-style-position inside     so that the bullet points are also centered      div topmenu-design ul li div       display inline     so that the bullet points aren t above the content        As a footnote  I think id  topmenu firstlevel  is invalid as an id attribute can t contain spaces      Indeed the w3c recommendation defines the id attribute as a  name  type        ID and NAME tokens must begin with a   letter   A-Za-z   and may be followed   by any number of letters  digits     0-9    hyphens   -    underscores          colons        and periods

User · Answer

From http   pmob co uk pob centred-float htm   The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position relative  left -50   Next the nested inner element is reversed and a relative position of  50  is applied  This has the effect of placing the element dead in the center  Relative positioning maintains the flow and allows other content to flow underneath   Code  x000D   x000D   buttons      float right      position relative      left -50       text-align left     buttons ul      list-style none      position relative      left 50       buttons li float left position relative     ie needs position relative here     buttons a      text-decoration none      margin 10px      background red      float left      border 2px outset blue      color  fff      padding 2px 5px      text-align center      white-space nowrap     buttons a hover  border 2px inset blue color red background  f2f2f2    content overflow hidden    hide horizontal scrollbar   x000D   lt div id  buttons  gt       lt ul gt           lt li gt  lt a href     gt Button 1 lt  a gt  lt  li gt           lt li gt  lt a href     gt Button 2 s a bit longer lt  a gt  lt  li gt           lt li gt  lt a href     gt Butt 3 lt  a gt  lt  li gt           lt li gt  lt a href     gt Button 4 lt  a gt  lt  li gt       lt  ul gt   lt  div gt  x000D   x000D   x000D

User · Answer

Demo - http   codepen io grantex pen InLmJ   lt div class  navigation  gt       lt ul gt           lt li gt  lt a href    gt Home lt  a gt  lt  li gt           lt li gt  lt a href    gt About lt  a gt  lt  li gt           lt li gt  lt a href    gt Contact lt  a gt  lt  li gt           lt li gt  lt a href    gt Menu lt  a gt  lt  li gt           lt li gt  lt a href    gt Others lt  a gt  lt  li gt       lt  ul gt   lt  div gt     navigation       max-width  700px      margin  0 auto     navigation ul       list-style  none      display  table      width  100      navigation ul li       display  table-cell      text-align  center     navigation ul li a       padding  5px 10px      width  100       Omg so much cleaner

User · Answer

ul margin-left 33     Is a decent approximation on big screens   Its not good  but a good dirty fix

User · Answer

Here s a good article on how to do it in a pretty rock-solid way  without any hacks and full cross-browser support  Works for me   --  http   matthewjamestaylor com blog beautiful-css-centered-menus-no-hacks-full-cross-browser-support

User · Answer

Try this   div topmenu-design ul     display block    width 600px     or whatever width value      margin 0px auto

User · Answer

topmenu-design       display  inline-table      That all

User · Answer

i use jquery code for this   Alternative solution         document  ready function             var margin       topmenu-design   width  -    topmenu   width               topmenu   css  margin-left  margin 2

User · Answer

div        text-align  center    div ul        display  inline-table      ul as inline-table fixes the with issue  I used the parent div to align the text to center  this way it looks good even in other languages  translation  different width

User · Answer

This is the simplest way I found  I used your html  The padding is just to reset browser defaults    x000D   x000D  ul   x000D    text-align  center  x000D    padding  0  x000D    x000D  li   x000D    display  inline-block  x000D    x000D   lt div class  topmenu-design  gt  x000D     lt  -- Top menu content  START -- gt  x000D     lt ul id  topmenu firstlevel  gt  x000D       lt li class  firstli  id  node id 64  gt  x000D         lt div gt  lt a href     gt  lt span gt Om kampanjen lt  span gt  lt  a gt  x000D         lt  div gt  x000D       lt  li gt  x000D       lt li id  node id 65  gt  x000D         lt div gt  lt a href     gt  lt span gt Fakta om inneklima lt  span gt  lt  a gt  x000D         lt  div gt  x000D       lt  li gt  x000D       lt li class  lastli  id  node id 66  gt  x000D         lt div gt  lt a href     gt  lt span gt Statistikk lt  span gt  lt  a gt  x000D         lt  div gt  x000D       lt  li gt  x000D     lt  ul gt  x000D     lt  -- Top menu content  END -- gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

With CSS3 flexbox  Simple   ul     display  flex    justify-content  center     ul li     padding  0 8px

User · Answer

Robusto s solution was the simplest for what I was trying to do  I suggest you use it   I was trying to do the same thing for images in an unordered list to make a gallery    I made a js fiddle to fool around with it   Feel free to try it here    it was set up using robusto s sample code  HTML    lt div id  centerDiv  gt       lt ul class  centerUL  gt           lt li gt  lt a href  http   www amazon com  gt  lt img src  http   placehold it 200x150 gt           lt  a gt  amp nbsp  amp nbsp  lt  li gt           lt li gt  lt a href  http   www amazon com  gt  lt img src  http   placehold it 200x150  gt  lt  a gt  amp nbsp  amp nbsp  lt  li gt           lt li gt  lt a href  http   www amazon com  gt  lt img src  http   placehold it 200x150  gt  lt  a gt  lt  li gt       lt  ul gt   lt  div gt     CSS   div centerDiv       width  700px      text-align  center      border  1px solid red    ul centerUL       margin  2px auto      line-height  1 4     centerUL li       display  inline      text-align  center

User · Answer

Like so many of you  I ve been struggling with this for a while   The solution ultimately had to do with the div containing the UL  All suggestions on altering padding  width  etc  of the UL had no effect  but the following did   It s all about the margin 0 auto  on the containing div   I hope this helps some people  and thanks to everyone else who already suggested this in combination with other things    divNav       width  99       text-align center      margin 0 auto       divNav ul        display inline-block       list-style none      zoom  1      divNav ul li        float left      margin-right   8em             padding  0       divNav a    divNav a visited       width  7 5em      display  block       border  1px solid  000      border-bottom none      padding  5px       background-color  F90      text-decoration  none      color  FFF      text-align  center      font-family Verdana  Geneva  sans-serif      font-size 1em

[css] How do I center align horizontal <UL> menu?

Examples related to css

Examples related to xhtml

Examples related to menuitem