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 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_
 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_

<div>  _x000D_
  <p>With Padding (Default Style)</p>_x000D_
            <ul class="with_pad">_x000D_
                <li>x</li>_x000D_
                <li>x</li>_x000D_
                <li>x</li>_x000D_
                <li>x</li>_x000D_
            </ul>_x000D_
  <div class="break"></div>_x000D_
  <p>No Padding (Padding: 0)</p>_x000D_
   <ul class="no_pad">_x000D_
                <li>x</li>_x000D_
                <li>x</li>_x000D_
                <li>x</li>_x000D_
                <li>x</li>_x000D_
            </ul>_x000D_
 <div>

_x000D_

Hope that helps anyone running into this same issue :)

Cheers,

Jake

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

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

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

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        lt div class  center  gt         lt ul class  dots  gt           lt span gt             lt li gt  lt  li gt             lt li gt  lt  li gt             lt li gt  lt  li gt           lt  span gt         lt  ul gt       lt  div gt    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

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

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

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

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

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

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

Examples related to html

Examples related to css