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

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

如果您希望从 navbar demo 2 设置vertical-middle，您最终可以将 line-height:75px 添加到 navnar 并将其重置为 1.2em 到 navabar 子项，这在这里没有太大区别。

Answer 2

这是你需要做的：

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

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