Whether you are working with a CMS or creating a static page (which is logically the step before your custom CMS theme), you are often left to ponder the best way to display a navigational menu or pagination links so that they are centered and in blocks of equal size. You’d be surprised how easy that is, this short tutorial is to get you to create a list that looks as such:

[iframe http://www.tarekshalaby.com/wp-content/centered_unordered_block_list.php 520]

We want blocks of equal sizes, each linking to a given page (without a gap between the edge of the box and start of the link). And we want the code to be perfectly valid, of course.

First, we’ll start with the markup, which is a very basic unordered list:

[sourcecode language=”XML”]
<ul class="navigation">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
[/sourcecode]

This alone results in a standard list with bullets and links. Now we need to add the CSS that will give us the look that we’re after:

[sourcecode language=”CSS”]
ul.navigation{
list-style: none;
text-align: center;
}
ul.navigation li {
display: inline;
font-size: 14px;
margin: 0 10px;
}
ul.navigation li a{
background-color: #e5f27b;
border: 1px solid #d9e383;
color: #666666;
display: inline-block;
padding: 2px 8px;
text-decoration: none;
width : 75px;
}
ul.navigation li a:hover{
background-color: #fe8a61;
border-color: #d78466;
color: #ffffff;
}
[/sourcecode]

As you can see, it’s very straight-forward and you can easily customize it according to your needs. It’s useful for navigational menus, as well as pagination links to be displayed at the top or bottom of a given page.