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.
0Looks 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> <li>x</li> <li>x</li> <li>x</li> <li>x</li> </ul> <div></div> <p>No Padding (Padding: 0)</p> <ul> <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
1Another 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>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>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 likeThe borders are just to show the spacing and are not needed.
Html:
<div> <ul> <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%;}0
The thing is ul tag comes with default margin and padding, therefore all you need to do is:
ul { margin: 0px; padding: 0px;
}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;
}In Bootstrap (4) use display: inline-flex, like so:
li { display: inline-flex; /* ... */
}// Ul css
ul{ width: 100%; justify-content: center; list-style-type: none; display: flex;}
// ul li css
ul li{ display: inline;
}I overcame the problem with this solution.
HTML:
<div> <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;
} 
