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

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.

<style>
ul {
    width:100%;
    background:red;
    height:20px;
    text-align:center;
}
li {
    display:block;
    float:left;
    background:blue;
    color:white;
    margin-right:10px;
}
</style>

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Check jsfiddle http://jsfiddle.net/3Ezx2/1/

This question is related to html css

The answer is


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/


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%;}


I overcame the problem with this solution.

HTML:

<div class="list-wrapper">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
</div>

CSS:

.list-wrapper {
   text-align: -webkit-center;
}
.list-wrapper ul {
    display:block;
}   

Another way to do this:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

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/


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;
}

I added the div line and it did the trick:

<div style="text-align:center">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>

ul {
    width: 100%;
    background: red;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

li {
    background: blue;
    color: white;
    margin-right: 10px;
}

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


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

Hope that helps anyone running into this same issue :)

Cheers,

Jake


li{
    display:table;
    margin:0px auto 0px auto;
}

This should work.


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_
<div>_x000D_
<ul>_x000D_
  <li>One</li>_x000D_
  <li>Two</li>_x000D_
  <li>Three</li>_x000D_
</ul>  _x000D_
_x000D_
</div>
_x000D_
_x000D_
_x000D_


In Bootstrap (4) use display: inline-flex, like so:

li {
    display: inline-flex;
    /* ... */
}