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/
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;
}
I had a problem slimier to yours I this quick and its the best solution I have found so far.
Shows what the output of the code looks like The borders are just to show the spacing and are not needed.
<div class="center">
<ul class="dots">
<span>
<li></li>
<li></li>
<li></li>
</span>
</ul>
</div>
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;}
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%;}
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;
}
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;
}
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;
}
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>
ul {
width: 100%;
background: red;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
li {
background: blue;
color: white;
margin-right: 10px;
}
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:
* {_x000D_
box-sizing: border-box;_x000D_
}_x000D_
_x000D_
ul {_x000D_
width: 120px;_x000D_
margin: auto;_x000D_
text-align: center;_x000D_
border: 1px solid black;_x000D_
}_x000D_
_x000D_
li {_x000D_
display: inline-block;_x000D_
}_x000D_
_x000D_
ul.no_pad {_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
p {_x000D_
margin: auto;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
.break {_x000D_
margin: 50px 10px;_x000D_
}
_x000D_
<div> _x000D_
<p>With Padding (Default Style)</p>_x000D_
<ul class="with_pad">_x000D_
<li>x</li>_x000D_
<li>x</li>_x000D_
<li>x</li>_x000D_
<li>x</li>_x000D_
</ul>_x000D_
<div class="break"></div>_x000D_
<p>No Padding (Padding: 0)</p>_x000D_
<ul class="no_pad">_x000D_
<li>x</li>_x000D_
<li>x</li>_x000D_
<li>x</li>_x000D_
<li>x</li>_x000D_
</ul>_x000D_
<div>
_x000D_
Hope that helps anyone running into this same issue :)
Cheers,
Jake
li{
display:table;
margin:0px auto 0px auto;
}
This should work.
A more modern way is to use flexbox:
ul{_x000D_
list-style-type:none;_x000D_
display:flex;_x000D_
justify-content: center;_x000D_
_x000D_
}_x000D_
ul li{_x000D_
display: list-item;_x000D_
background: black;_x000D_
padding: 5px 10px;_x000D_
color:white;_x000D_
margin: 0 3px;_x000D_
}_x000D_
div{_x000D_
background: wheat;_x000D_
}
_x000D_
<div>_x000D_
<ul>_x000D_
<li>One</li>_x000D_
<li>Two</li>_x000D_
<li>Three</li>_x000D_
</ul> _x000D_
_x000D_
</div>
_x000D_
In Bootstrap (4) use display: inline-flex
, like so:
li {
display: inline-flex;
/* ... */
}
Source: Stackoverflow.com