在百分比高度工具栏中垂直居中图像/图标答案

【问题标题】：Vertically Center Images/Icons inside percentage-height toolbar在百分比高度工具栏中垂直居中图像/图标
【发布时间】：2013-06-30 08:55:08
【问题描述】：

我正在为 PhoneGap 应用程序编写状态栏。它需要看起来像这样：

____________________________________________________________
|[Icon] [Logo]            [Text]               [Icon][Icon]|
------------------------------------------------------------

图标是相同大小的方形图像（条形高度的 50%，垂直居中），但与徽标的高度不同，徽标应占满条形高度的 100%。文本是当前页面标题。

状态栏高度是屏幕总高度的百分比，我不能使用固定高度。我目前的结构是这样的：

<div class="statusbar">
  <div class="left">
    <img src="a.png" class="icon" />
    <img src="logo.png" class="logo" />
  </div>

  <span class="ptitle">Text</span>

  <div class="right">
    <img src="b.png" class="icon" />
    <img src="c.png" class="icon" />
  </div>
</div>

我尝试在适当的地方使用display: table; 和display: table-cell;，但图标高度（设置为 100%）最终会填满整个屏幕，除非我将它们设置为 position: absolute;这会阻止我将它们并排放置。

如何在垂直居中放置这些组件时（左-中-右）？

【问题讨论】：

你现在有什么CSS？（标记无效 (div|span|div)
@GCyrillus：您能否详细说明为什么标记无效？
inline-boxe 挤在两个块盒之间，你可以只使用或只使用
;)

标签： css html cordova vertical-alignment statusbar

【解决方案1】：

怎么样？

/* page set up */
html, body { height:100%; margin:0; }

/* diagnostic coloring */
.statusbar { background:#FFC; }

/* status bar height is percentage of screen height  */
.statusbar { height:20%; }

/* icon heights to be 50% of status bar. logo height to be 100% of status bar.
   All vertically centered */
.logo { height:100%; }
.icon { height:50%; }
img { vertical-align: middle; }

/* line box positioning */
.statusbar { text-align:justify; }
.statusbar > div { display:inline-block; height:100%;}
.statusbar:after { content:''; width:100%; display: inline-block;}

JSFiddle：http://jsfiddle.net/hAq2E/3/

【讨论】：

你好，为了避免 :after 之间的间隙，使用行高:) codepen.io/gcyrillus/pen/dlvCp 在这个例子中，较高的元素将给出容器的最终高度。
@GCyrillus：谢谢，您的解决方案很有帮助。你应该把它放在这里，这样它就可以被投票了:)

【解决方案2】：

按照您的要求，这里有一个类似的答案（相同的基本方法），其中使用 line-height 并且将高度调整为内容：

http://codepen.io/gcyrillus/pen/dlvCp

header * {display:inline-block;
  vertical-align:middle;
  line-height:1.2em;
  margin:0 10px;
}
header {
  text-align:justify;
  line-height:0;
  background:#bbb;
  padding:0;  
  box-shadow:0 0 5px;
}
header:after {
  content:'';
  display:inline-block;
  width:99%;
  vertical-align:top;

}

【讨论】：