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

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.
<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/

Answer 1

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 2

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 3

li{
display:table;
margin:0px auto 0px auto;
}
This should work.

Answer 4

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

Answer 5

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:
* {
box-sizing: border-box;
}
ul {
width: 120px;
margin: auto;
text-align: center;
border: 1px solid black;
}
li {
display: inline-block;
}
ul.no_pad {
padding: 0;
}
p {
margin: auto;
text-align: center;
}
.break {
margin: 50px 10px;
}
<div>
<p>With Padding (Default Style)</p>
<ul class="with_pad">
<li>x</li>
<li>x</li>
<li>x</li>
<li>x</li>
</ul>
<div class="break"></div>
<p>No Padding (Padding: 0)</p>
<ul class="no_pad">
<li>x</li>
<li>x</li>
<li>x</li>
<li>x</li>
</ul>
<div>
Hope that helps anyone running into this same issue :)
Cheers,
Jake

Answer 6

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/

Answer 7

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

Answer 8

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>

Answer 9

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

Answer 10

The thing is ul tag comes with default margin and padding, therefore all you need to do is:
ul {
margin: 0px;
padding: 0px;
}

Answer 11

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

Answer 12

In Bootstrap (4) use display: inline-flex, like so:
li {
display: inline-flex;
/* ... */
}

Answer 13

// Ul css
ul{
width: 100%;
justify-content: center;
list-style-type: none;
display: flex;
}
// ul li css
ul li{
display: inline;
}

Answer 14

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