How do I center list items inside a UL element

Question

How do I center list items inside a ul without using extra divs or elements  I have the following  I thought text-align center would do the trick  I can t seem to figure it out     lt style gt  ul       width 100       background red      height 20px      text-align center    li       display block      float left      background blue      color white      margin-right 10px     lt  style gt    lt ul gt     lt li gt test lt  li gt     lt li gt test lt  li gt     lt li gt test lt  li gt     lt li gt test lt  li gt     lt li gt test lt  li gt   lt  ul gt    Check jsfiddle http   jsfiddle net 3Ezx2 1

User · Answer

I had a problem slimier to yours I this quick and its the best solution I have found so far.

What the output looks like

Shows what the output of the code looks like The borders are just to show the spacing and are not needed.

Html:

    <div class="center">
      <ul class="dots">
        <span>
          <li></li>
          <li></li>
          <li></li>
        </span>
      </ul>
    </div>

CSS:

    ul {list-style-type: none;}
    ul li{
        display: inline-block;
        padding: 2px;
        border: 2px solid black;
        border-radius: 5px;}
    .center{
        width: 100%;
        border: 3px solid black;}
    .dots{
        padding: 0px;
        border: 5px solid red;
        text-align: center;}
    span{
        width: 100%;
        border: 5px solid blue;}

Not everything here is needed to center the list items.

You can cut the css down to this to get the same effect:

    ul {list-style-type: none;}
    ul li{display: inline-block;}
    .center{width: 100%;}
    .dots{
        text-align: center;
        padding: 0px;}
    span{width: 100%;}

User · Answer

Neither text-align center nor display inline-block worked for me on their own  but combining both did   ul     text-align  center    li     display  inline-block

User · Answer

write display inline-block instead of float left   li           display inline-block           display inline    IE7            zoom 1    IE7           background blue          color white          margin-right 10px      http   jsfiddle net 3Ezx2 3

User · Answer

Another way to do this    lt ul gt     lt li gt One lt  li gt     lt li gt Two lt  li gt     lt li gt Three lt  li gt   lt  ul gt   ul     width  auto    display  table    margin-left  auto    margin-right  auto     ul li     float  left    list-style  none    margin-right  1rem      http   jsfiddle net f6qgf24m

User · Answer

A more modern way is to use flexbox    x000D   x000D  ul  x000D    list-style-type none  x000D    display flex  x000D    justify-content  center  x000D   x000D    x000D  ul li  x000D    display  list-item  x000D    background  black  x000D    padding  5px 10px  x000D    color white  x000D    margin  0 3px  x000D    x000D  div  x000D    background  wheat  x000D    x000D   lt div gt  x000D   lt ul gt  x000D     lt li gt One lt  li gt  x000D     lt li gt Two lt  li gt  x000D     lt li gt Three lt  li gt  x000D   lt  ul gt    x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have run into this issue before and found that sometimes padding is the issue    By removing padding from the ul  any li s set to inline-block will be nicely centred     x000D   x000D      x000D   box-sizing  border-box  x000D    x000D   x000D  ul   x000D   width  120px  x000D   margin  auto  x000D   text-align  center  x000D   border  1px solid black  x000D    x000D   x000D  li   x000D   display  inline-block  x000D    x000D   x000D  ul no pad   x000D   padding  0  x000D    x000D   x000D  p   x000D   margin  auto  x000D   text-align  center  x000D    x000D   x000D   break   x000D   margin  50px 10px  x000D    x000D   lt div gt    x000D     lt p gt With Padding  Default Style  lt  p gt  x000D               lt ul class  with pad  gt  x000D                   lt li gt x lt  li gt  x000D                   lt li gt x lt  li gt  x000D                   lt li gt x lt  li gt  x000D                   lt li gt x lt  li gt  x000D               lt  ul gt  x000D     lt div class  break  gt  lt  div gt  x000D     lt p gt No Padding  Padding  0  lt  p gt  x000D      lt ul class  no pad  gt  x000D                   lt li gt x lt  li gt  x000D                   lt li gt x lt  li gt  x000D                   lt li gt x lt  li gt  x000D                   lt li gt x lt  li gt  x000D               lt  ul gt  x000D    lt div gt  x000D   x000D   x000D    Hope that helps anyone running into this same issue      Cheers    Jake

User · Answer

li      display table      margin 0px auto 0px auto      This should work

User · Answer

Looks like all you need is text-align  center  in ul

User · Answer

ul       width  100       background  red      height  20px      display  flex      justify-content  center      align-items  center     li       background  blue      color  white      margin-right  10px

User · Answer

I added the div line and it did the trick     lt div style  text-align center  gt   lt ul gt   lt li gt test lt  li gt   lt li gt test lt  li gt   lt li gt test lt  li gt   lt li gt test lt  li gt   lt li gt test lt  li gt   lt  ul gt   lt  div gt

User · Answer

I overcame the problem with this solution  HTML   lt div class  quot list-wrapper quot  gt       lt ul gt           lt li gt a lt  li gt           lt li gt b lt  li gt           lt li gt c lt  li gt           lt li gt d lt  li gt           lt li gt e lt  li gt       lt  ul gt   lt  div gt   CSS   list-wrapper      text-align  -webkit-center     list-wrapper ul       display block

User · Answer

In Bootstrap  4  use display  inline-flex  like so   li       display  inline-flex

[html] How do I center list items inside a UL element?

What the output looks like

Html:

CSS:

Not everything here is needed to center the list items.

Examples related to html

Examples related to css