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

Answer 1

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

Answer 2

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/

Answer 3

A more modern way is to use flexbox:

ul{
  list-style-type:none;
  display:flex;
  justify-content: center;

}
ul li{
  display: list-item;
  background: black;
  padding: 5px 10px;
  color:white;
  margin: 0 3px;
}
div{
  background: wheat;
}

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

</div>

Answer 4

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

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

Answer 5

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

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

Answer 6

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