How to center a List(ul)
- by BlackPearl
I have a ul List that contain some li elements and I float them to left. It currently looks like below;
| A | B | C | D | E < space empty|
I want it to be
| A | B | C | D | E |
that is center on the page and contents should be centered too
HTML
<div class="profile-content">
<ul class="content-btn">
<li>
<div class="digits">83</div>Followers
</li>
<li>
<div class="digits">1507</div>Tweets
</li>
<li>
<div class="digits">234</div>Friends
</li>
<li>
<div class="digits">51</div>Likes
</li>
<li>
<div class="digits">42</div>Gits
</li>
</ul>
<div class="clear"></div>
</div>
CSS
.content-btn {
width:100%;
margin: 0 auto;
}
.profile-content ul li {
float: left;
padding: 5px 8px;
text-align: center;
border-right: 1px solid #eeeeee;
border-left: 1px solid #ffffff;
}
.profile-content ul li .digits {
font-weight: bold;
font-size: 16px;
}
