Question

我使用text-align元素使我的导航菜单居中。我还使用position和bottom元素将它对齐到父div的底部，但是当我使用position和bottom元素时，它会取消文本对齐。为什么这样做？ 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的整个宽度，而是与左

为了达到您所需的效果，只需修改#nav的CSS，添加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; 
}

对齐<a> to the bottom, while centering them?</a>

1 个答案: