html - 在 div 中垂直居中图像并将元素 float 到右侧，显示内联 block 不起作用

Question

html

    <div id="navBar">
    <div class="navBarStyles">
        <a href="#"><img src="http://www.www8-hp.com/us/en/images/i/header-footer/caas-hf-v3/hp-logo-pr.gif"/></a>
        <ul class="iconStyles">
            <li><a href="#">u</a></li>
            <li><a href="#">z</a></li>
        </ul>
        <div style="clear:both"></div>
    </div>
</div>

CSS

    #navBar{
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    font-family: "opensans-semibold";
    font-size: 1em;
    position: relative;
    background-color: #0088FF;
    color: #FFFFFF;
    line-height: 100px;
}
#navBar a{
    color: #FFFFFF;
    opacity: .8;
}
#navBar a:hover{
    opacity: 1;
}
#navBar .navBarStyles img{
    display: inline-block;       /*this style is not working */
    vertical-align: middle;
    margin: 0 20px 0 20px;
}

#navBar .navBarStyles .iconStyles li{
    float: right;
    padding: 0 20px 0 20px;
}

jsFiddle

我想在这里做的是在我的导航栏中垂直居中图像，但是当我使用 display: inline-block; 时它似乎不起作用。我尝试了 float: left; 但是图像没有垂直居中。

Answer 1

好的..这个怎么样:DEMO

HTML:

<div id="navBar">    
    <a href="#">
      <img src="http://www.www8-hp.com/us/en/images/i/header-footer/caas-hf-v3/hp-logo-pr.gif"/>
    </a>    
    <div class="navBarStyles">      
        <ul>
            <li><a href="#" class="i-icon">u</a></li>
            <li><a href="#" class="menu-icon">z</a></li>
        </ul>
    </div>    
  </div> 

CSS:

    #navBar{
    max-width: 960px;
    width: 100%;
    padding: 5px;
    margin: 0 auto;
    font-family: "opensans-semibold";
    font-size: 1em;
    background-color: #0088FF;
    color: #FFFFFF;
}

#navBar a{
    color: #FFFFFF;
    opacity: .8;
}
#navBar a:hover{
    opacity: 1;
}

#logo {

  display: inline-block;
}

#logo img  {

  margin: 0 20px;
  vertical-align: middle;
}

.navBarStyles {

  float: right;
  line-height: 1.9em;
}
.navBarStyles ul li {
  display: inline-block;
}