Question

我试图在容器div中垂直对齐图像。

这是我的HTML：

<div class="navbar">
  <div class="back">
      <img src="http://s16.postimg.org/m5yrst5k1/back_icon.png">
  </div>
  <div class="title">
      <h1>title</h1>
  </div>
  <div class="menu">
      <img src="http://s8.postimg.org/hmusw99pt/menu_icon.png">
  </div>
 </div>

这就是css：

html,body{
  height: 100%;
  width: 100%;
  padding:0;
  margin:0 auto;
}

.navbar {
  background: #09c;
  width: 100%;
  height: 75px;
  z-index: 99999;
  box-shadow: 0 0 10px #000;
}

.navbar .back {
position: absolute;
left: 0;
padding:2% 0 0 1%;

}

.navbar .menu{
  position: absolute;
  right: 0;
  padding: 2% 1% 0 0;
}

.navbar .title{
  position:absolute;
  text-align: center;
  width: 100%;
  color: white;
}

我知道我可以使用一些媒体查询来设置上边距，这样图像总是垂直居中，但必须有更好的方法来做到这一点。

我也尝试过这样的事情但没有成功：

img{
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
}

我应该如何垂直居中以使图像始终响应？

这是我的代码：

http://codepen.io/anon/pen/mLxei

提前致谢！

Answer 1

您需要在流程中保留div并将display:inline-block与vertical-align相互使用。的 DEMO

然后，您可以在第一行触发text-align:justify，添加一个绘制不可见第二行的伪元素。

html,body{ height: 100%; width: 100%; padding:0; margin:0 auto; } .navbar { background: #09c; width: 100%; height: 75px; text-align:justify; box-shadow: 0 0 10px #000; } .navbar .back , .navbar .menu, .navbar .title{ display:inline-block; vertical-align:middle; margin:0 1em;/* optionnal*/ } /* trigger justify if only 1 line */ .navbar:after { content:''; width:99%; display:inline-block; }

如果你想要从导航栏demo 2设置vertical-middle，你最终可以向navnar添加line-height：75px并将其重置为1.2em给navabar child。它在这里没有太大的区别。

Answer 2

以下是您需要做的事情：

<style>
.image-container {
     display:table-cell;
     margin:auto;
     vertical-align:middle;
 }
</style>

<div class="image-container"><img src="{IMAGE_URL}"/></div>

如何垂直居中图像这些div？

2 个答案: