0

我正在为 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;anddisplay: table-cell;在适当的情况下，但图标高度（设置为 100%）最终会填满整个屏幕，除非我将它们设置为 position: absolute; 这会阻止我将它们并排放置。

如何在垂直居中所有内容的同时如图所示（左中右）放置这些组件？

4

2 回答 2

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/

于 2013-06-30T10:49:43.893 回答
1

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

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;

}
于 2013-07-01T14:39:03.190 回答