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

14 Answers

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

5

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>
2
li{
    display:table;
    margin:0px auto 0px auto;
}

This should work.

0

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

1

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

1

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;
}
ul {
    width: 100%;
    background: red;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

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

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

Chloe Bennett

Chloe Bennett

Culture, Media & Entertainment Columnist

Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.