Vertical centering of image in fluid nav bar

Question

I am trying to get a fluid navigation bar done in Dreamweaver, which will also change the size of the logo when changing the viewport. This works and looks perfectly, except that the logo image will not stay vertically centered when it gets smaller.

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

I have of course tried many solutions found here and elsewhere, but nothing works since they dont seem to take the side by side elements of mine into account. As you can see I have already tried playing around with a few stupid tricks in my frustration, but they wont do much either.

Answer 1

I think you need to add vertical-align:middle (img is a inline element like text).

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