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

Answer 2

您可以使用表格

解决此问题

HTML

<div id="navBar">
<table class="navBarStyles"><tr>
    <td id="esq"><a href="#"><img src="http://www.www8-hp.com/us/en/images/i/header-footer/caas-hf-v3/hp-logo-pr.gif"/></a>
    </td>
    <td id="dir">
    <ul class="iconStyles">
        <li><a href="#" class="i-icon">u</a></li>
        <li><a href="#" class="menu-icon">z</a></li>
    </ul>
    </td>
    </tr></table>
</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;      
vertical-align: middle;
margin: 0 20px 0 20px;
}

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

#esq {text-alignment:left;}

#dir {text-alignment:right;}

.navBarStyles {width: 100%; height: 100%; }

Answer 3

你可以尝试这个jQuery：

<script>
w = window.innerWidth;
h = window.innerHeight;
$('#id').css('height', h - 100);
$('#id').css('margin-top', 50);
$('#id').css('width', w - 100);
$('#id').css('margin-left', 50);
</script>

50是那里100的一半，100是div或图片与“#id”和浏览器高度和宽度之间的总距离。

您也可以使用jQuery来查找div的高度：

h = $（“＃myDiv”）。height（）;

Answer 4

image垂直居中与作为背景的parent div对齐，links取决于图像的位置，这就是为什么它在图像下方添加空间的原因图像看起来不是垂直居中。我向图片的padding添加了top，等于链接添加的空间，以避免重大编码。

请检查：JSFIDDLE

希望这有帮助。

Answer 5

您是否尝试过内联样式：

    style="vertical-align:middle"

结果如下：

    <img src="http://www.www8-hp.com/us/en/images/i/header-footer/caas-hf-v3/hp-logo-pr.gif" style="vertical-align:middle" />

您也可以为它创建一个图像类，内嵌样式只是一个例子。

div中垂直居中图像，右边浮动元素，显示内联块不起作用

5 个答案: