html - 对齐底部，同时居中？

Question

我使用 text-align 元素使导航菜单居中。我还使用位置和底部元素将其与父 div 的底部对齐，但是当我使用位置和底部元素时，它会取消文本对齐。为什么这样做？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;
    position:relative;
}
#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;
}

Answer 1

该text-align属性没有被取消，但是当您将您定位div#nav到底部时，它不再使用整个宽度div.header并与左侧对齐。

为了达到你需要的效果，只需修改 CSS for#nav通过添加left和right属性将 div 扩展到整个可用宽度：

#nav {
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center; 
    text-decoration:none; 
    font-size:20px;
    font-family:raleway-regular; 
}