0

<a>ナビゲーション div 内でを垂直方向に揃えようとしていますが、何らかの理由で機能しません。コードをオーバーライドする他のスタイルがないこと、および配置のいくつかの組み合わせがないことを既に確認しました。

<div id="logodiv">
    <figure>
        <img id="logo" src="/images/Capture2.jpg" alt="logo" />
    </figure>
    <nav id="flexbox">
        <div class="menudiv"><a class="menua" href="gallery.html">Gallery</a></div>
        <div class="menudiv"><a class="menua" href="events.html">Events</a></div>
        <div class="menudiv"><a class="menua" href="default.html">Home</a></div>
        <div class="menudiv"><a class="menua" href="membership.html">Info</a></div>
        <div class="menudiv"><a class="menua" href="contactus.html">Contact</a></div>
    </nav>
</div>

CSS

#logodiv {
    width:100%;
    height:100px;
    position:relative;
    display:block;

}

#flexbox{
    background-color:#f5b00e;
    float:right;
    width:65%;
    min-width:400px;
    height:30px;
    padding:0;
    margin:0;
    white-space:nowrap;
    margin-bottom:0px;
    position:absolute;
    right:0px;
    bottom:0px;
    display:inline;
}

.menudiv{
    width:20%;
    height:100%;
    line-height:100%;
    display:inline;
    float:left;
    margin:0 auto;
    padding:0;
    vertical-align:middle;
    position:relative;
}

.menua{
    line-height:100%;
    height:100%;
    font-family: font, Arial, sans-serif;
    font-size:15pt;
    text-decoration:none;
    text-shadow:none;
    margin-top:10px;
    vertical-align:bottom;
}

任意の助けをいただければ幸いです。

4

1 に答える 1

0

確認してください http://jsfiddle.net/mKbLW/1/

いくつかの値を変更しました。いくつかの不要なcssルールがありました。

#logodiv {
    width:100%;
    height:100px;
    position:relative;
    display:block;

}

#flexbox{
    background-color:#f5b00e;
    float:right;
    width:65%;
    min-width:400px;
    height:30px;
    padding:0;
    margin:0;
    white-space:nowrap;
    margin-bottom:0px;
    position:absolute;
    right:0px;
    bottom:0px;
    display:inline;
}

.menudiv{
    width:20%;
    height:100%;
    float:left;
    padding:0;
    position:relative;
}

.menua {
    height:100%;
    line-height:30px;
    display:inline;
    font-family: font, Arial, sans-serif;
    font-size:15pt;
    text-decoration:none;
    text-shadow:none;
    margin-top:10px;
}
于 2013-02-22T20:33:26.277 に答える