Question

我正在尝试在Dreamweaver中完成一个流畅的导航栏，这也会在更改视口时更改徽标的大小。这样看起来很完美，除了徽标图像变小时不会垂直居中。

<div class="gridContainer clearfix">   <div id="div1" class="fluid">
    <div id="divL" class="fluid"><img src="images/logo.png" alt=""/></div><div id="divR" class="fluid">
      <nav id="button1" class="fluid">Link 1</nav>
      <nav id="button2" class="fluid">Link 2</nav>
      <nav id="button3" class="fluid">Link 3</nav>
    </div></div></div>

CSS：

.gridContainer {
    padding-left: 0.8333%;
    padding-right: 0.8333%;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
}
#div1 {
}
#divL {
    width: 32.2033%;
    text-align: right;
    min-height: 65px;
    height: 65px;
    line-height: 20px;
}
#divR {
    width: 66.1016%;
    margin-left: 1.6949%;
    clear: none;
    text-align: center;
    font-size: larger;
    font-weight: lighter;
    line-height: 65px;
}
#button1 {
    width: 23.0769%;
    margin-left: 0;
}
#button2 {
    width: 35.8974%;
    margin-left: 2.5641%;
    clear: none;
}
#button3 {
    width: 35.8974%;
    clear: none;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

我当然尝试过在这里和其他地方找到的许多解决方案，但没有任何作用，因为它们似乎并没有考虑到我的并排元素。正如你所看到的，我已经尝试过在挫折中玩弄一些愚蠢的技巧，但他们也不会做太多。

Answer 1

我认为你需要添加vertical-align：middle（img是一个像文本一样的内联元素）。

#divL {
    display:inline-block;
    vertical-align: middle;
}

流体导航条中图像的垂直居中

1 个答案: