html - 如何将这些 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;
}

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