html - 在div中垂直居中放置图像，并向右 float 元素，显示行内块不起作用

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;，但是图像没有垂直居中。

最佳答案

好的，这是怎么回事：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;
}

关于html - 在div中垂直居中放置图像，并向右 float 元素，显示行内块不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21567253/