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...
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;
}
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>
li{
display:table;
margin:0px auto 0px auto;
}
This should work.
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:
* {
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
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>