CSS
Center li in ul using CSS Example
When working with unordered lists (ul) using HTML & CSS, you might have seen that the ul li stack vertically. But you may want them to stack horizontally and better yet, align them all horizontally so that all the li center in ul. So do you know how to center list item in the unordered list using CSS? If not, don’t worry In this article, I am going to show you a very simple way to center li in ul using CSS and thereby fabulous CSS menu and center the list items inside the list using an easy example.
How to Center li in ul using CSS – Example
Before I show you the HTML and CSS required to center the list items in its parent unordered list using CSS, let’s look at the output:
So this example assumes that we have a div and we are using an unordered list (ul list) with some list items (li items) in it. It’s upto you to decide how many li items you want to center in it. There’s no limit as such. But for the sake of the example to center li in ul using CSS, I am going to assume that we have 6 li items.
The following is HTML markup. You may use it and change it as you need it.
<style type="text/css">#nav {
background-color: #930;
padding: 10px;
margin-left: auto;
margin-right: auto;
width: 500px;
margin-top: 50px;
}
#nav ul {
text-align: center;
padding: 0;
margin: 0;
}
#nav li {
display: inline;
list-style: none;
padding: 10px 5px 10px 5px;
}
#nav a {
color: #930;
text-decoration: none;
padding: 5px;
background-color: #FFBE9F;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
}
#nav a:hover {
background-color: #FFC9AE;
}
</style>
HTML:
<div id="nav">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Sixth link is long link</a></li>
</ul>
</div>Your Turn!
Do you know of any other ways to center li in ul using CSS? Feel free to share your comments below.