Question

我正在尝试垂直对齐导航div中的<a>，并且由于某种原因无法正常工作。我已经检查过没有其他样式覆盖我的代码，以及几种定位组合。

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

任何帮助将不胜感激。

Answer 1

检查 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;
}

vertical-align css3。尝试了其他一切

1 个答案: