我正在尝试在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;
}
我当然尝试了在这里和其他地方找到的许多解决方案，但是没有任何效果，因为它们似乎没有考虑到我的并行因素。如您所见，我已经尝试过用一些愚蠢的技巧来使我沮丧，但它们也不会做很多事情。
我认为您需要添加vertical-align：middle（img是像文本一样的内联元素）。
#divL {
display:inline-block;
vertical-align: middle;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句