Positioning text bottom and centering at the same time - html

Question

I'm trying to position a nav element in a coloured box. The text in this box should be on the bottom and center of this box.
HTML
<div class="sixteen columns">
<section id="mainNav">
<ul>
<li id="nav2" class="navitem">ux / ui</li>
</ul>
</section>
</div><!--end sixteen columns-->
CSS:
/*navigation styles*/
.sixteen.columns #mainNav {
width: 100%;
margin-top: 50px;
}
#mainNav .navitem {
width: 40%;
display: block;
float: left;
position: relative;
pointer: cursor;
}
#mainNav ul li a {
font-family: print_clearlyregular, "Arial", serif;
font-size: 2em;
color: rgb(255, 255, 255);
text-decoration: none;
position: absolute;
bottom: 15px;
left: 0;
}
#mainNav #nav2 {
background: rgb(3, 106, 113);
opacity:0.8;
filter:alpha(opacity=80);
/* For IE8 and earlier */
margin-right: 4px;
height: 150px;
text-align:center;
}
As soon as I absolute position the "ul li a", the text-align: center doesn't work. How should I fix that?
You can see this bit in jsfiddle as well:
jsFiddle

Answer 1

Add width:100%; to
#mainNav ul li a {}
the fiddle: http://jsfiddle.net/sablefoste/bcM2x/

Answer 2

Don't specify any value for left (or right for that matter) for ul li a.

Answer 3

I'd like to add an alternative solution that doesn't rely on floats or absolute positioning, which can get pretty messy.
Using display: table, display: table-cell, and vertical-align: bottom, you can achieve said result. This also scales well when other items around it may change.
Here is a working jsFiddle demo
CSS Changes
I removed all float and position styles, added display: table to the ul, added display: table-cell and vertical-align: bottom to the li, added display: inline-block to the a along with margin-bottom: 15px to retain that padding your absolute positioning created. I modified the selectors and added a few other minor things that you can use or adjust to your liking.
/*navigation styles*/
#mainNav
{
width: 100%;
margin-top: 50px;
}
#mainNav > ul
{
display: table;
width: 100%;
margin: 0;
padding: 0;
border: none;
}
#mainNav > ul > li
{
display: table-cell;
height: 150px;
text-align: center;
vertical-align: bottom;
pointer: cursor;
background: rgb(3, 106, 113);
opacity:0.8;
filter:alpha(opacity=80);
/* For IE8 and earlier */
margin-right: 4px;
}
#mainNav > ul > li > a
{
display: inline-block;
margin-bottom: 15px;
font-family: print_clearlyregular, "Arial", serif;
font-size: 2em;
color: rgb(255, 255, 255);
text-decoration: none;
background: blue; // added for demo to show width and margin
}