How do I center list items inside a UL element?
HtmlCssHtml Problem Overview
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/
Html Solutions
Solution 1 - Html
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/
Solution 2 - Html
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>
Solution 3 - Html
li{
display:table;
margin:0px auto 0px auto;
}
This should work.
Solution 4 - Html
Looks like all you need is text-align: center;
in ul
Solution 5 - Html
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
Solution 6 - Html
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;
}
Solution 7 - Html
ul {
width: 100%;
background: red;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
li {
background: blue;
color: white;
margin-right: 10px;
}
Solution 8 - Html
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>
Solution 9 - Html
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%;}
Solution 10 - Html
The thing is ul tag comes with default margin and padding, therefore all you need to do is:
ul {
margin: 0px;
padding: 0px;
}
Solution 11 - Html
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;
}
Solution 12 - Html
In Bootstrap (4) use display: inline-flex
, like so:
li {
display: inline-flex;
/* ... */
}
Solution 13 - Html
// Ul css
ul{
width: 100%;
justify-content: center;
list-style-type: none;
display: flex;
}
// ul li css
ul li{
display: inline;
}
Solution 14 - Html
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;
}