How to center an unordered list

Question

I need to center an unordered list of unknown width  while still keeping the list-items left aligned   Achieve the same result as this   HTML   lt div gt       lt ul gt           lt li gt  lt  li gt           lt li gt  lt  li gt           lt li gt  lt  li gt       lt  ul gt   lt  div gt    CSS  div   text-align  center    ul   display  inline-block  text-align  left      Except my  lt ul gt  doesn t have a parent div  ul   margin  0 auto    doesn t work because I don t have a fixed width  ul   text-align  center    doesn t work because the list-items won t be left aligned anymore  So how can I center this  lt ul gt  while keeping the  lt li gt s left aligned  without having a parent div wrapper     lt ul gt       lt li gt  lt  li gt       lt li gt  lt  li gt       lt li gt  lt  li gt   lt  ul gt    EDIT  Perhaps my wording wasn t the best    The first block of code already works    what i need is to do it without the  lt div gt  wrapper  if that s possible of course  Float tricks  Pseudo element tricks  There must be a way

User · Answer

To center align an unordered list  you need to use the CSS text align property  In addition to this  you also need to put the unordered list inside the div element   Now  add the style to the div class and use the text-align property with center as its value   See the below example    lt style gt   myDivElement      text-align center     myDivElement ul li     display inline       lt  style gt   lt div class  myDivElement  gt   lt ul gt       lt li gt Home lt  li gt       lt li gt About lt  li gt       lt li gt Gallery lt  li gt       lt li gt Contact lt  li gt   lt  ul gt   lt  div gt    Here is the reference website Center Align Unordered List

User · Answer

x000D   x000D  ul   x000D    display  table  x000D    margin  0 auto  x000D    x000D   lt html gt  x000D   x000D   lt body gt  x000D     lt ul gt  x000D       lt li gt 56456456 lt  li gt  x000D       lt li gt 4564564564564649999999999999999999999999999996 lt  li gt  x000D       lt li gt 45645 lt  li gt  x000D     lt  ul gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

http   jsfiddle net psbu2 3   If it is possible for you to use your own list bullets  Try this    lt html gt       lt head gt           lt style type  text css  gt               ul                   margin 0                  padding 0                  text-align  center                  list-style none                                            ul  li                   padding  2px 5px                                            ul li before                   content url http   www un org en oaj unjs efiling added images bullet-list-icon-blue jpg                           lt  style gt       lt  head gt       lt body gt                lt ul gt                   lt li gt 1 lt  li gt                   lt li gt 2 lt  li gt                   lt li gt 3 lt  li gt               lt  ul gt        lt  body gt   lt  html gt

User · Answer

From your post  I understand that you cannot set the width to your li  How about this   x000D   x000D  ul     border 2px solid red    display inline-block     li     display inline    padding 0 30      try adjusting the side   to give a feel of center aligned      x000D   lt ul gt       lt li gt Hello lt  li gt       lt li gt Hezkdhkfskdhfkllo lt  li gt       lt li gt Hello lt  li gt   lt  ul gt  x000D   x000D   x000D   Here s a demo  http   codepen io anon pen HhBwx

User · Answer

Let s say the list is   lt ul gt    lt li gt item1 lt  li gt    lt li gt item2 lt  li gt    lt li gt item3 lt  li gt   lt  ul gt   For this example  If I understand correctly  you want the list items to be in the middle of the screen  but you want the text IN those list items to be centered to the left of the list item itself  Doing that is actually pretty easy  You just need some CSS  ul       display  table       margin  0 auto      text-align  left     And it works  Here is what is happening  First  we say we want to affect only unordered lists  Then  we do Rafael Herscovici s trick for centering the list items  Finally  we say to align the text to the left of the list items

[html] How to center an unordered list?

Examples related to html

Examples related to css

Examples related to html-lists

Examples related to center