Question

我正在为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;这使我无法将它们并排放置。

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

Answer 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/

Answer 2

根据您的要求，这里有一个类似的答案（相同的基本方法），其中使用了行高，并将高度调整为内容：

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;

}

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

2 个答案: