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

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

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

Vertical centering of image in fluid nav bar

css

center

dreamweaver

fluid