1

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;
}
4

1 に答える 1

5

text-alignプロパティはキャンセルされませんが、下に配置するとdiv#nav、幅全体が使用div.headerされなくなり、左に配置されます。

必要な効果を得るには、およびプロパティを#nav追加して CSS を変更し、使用可能な幅全体に div を拡張します。leftright

#nav {
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center; 
    text-decoration:none; 
    font-size:20px;
    font-family:raleway-regular; 
}
于 2013-05-23T09:02:54.257 に答える