I have successfully centered my navigation menu using the text-align property. Additionally, I aligned it to the bottom of the parent div by utilizing the position and bottom properties. However, I encountered an issue where using the position and bottom properties seemed to cancel out the text-align property. Why does this happen? http://jsfiddle.net/CQTEY/
HTML
<div class="header">
<div class="logo">
<img src="/images/logo.png" width="96" height="82">
</div>
<div id="nav">
<a href="#">Portfolio</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</div>
CSS
.header {
position:relative;
background-color: #2C2E31;
border-bottom: #242426 2px solid;
height: 182px;
}
#nav {
position:absolute;
bottom:0;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav a {
border-bottom:#FFFFFF 2px solid;
color:#FFFFFF;
text-decoration:none;
margin-left: 8px;
margin-right:8px;
}