Search code examples
csshtmlcordovavertical-alignmentstatusbar

Vertically Center Images/Icons inside percentage-height toolbar

I am writing a status bar for a PhoneGap application. It needs to look something like this:

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

The icons are square images of the same size (50% of bar height, centered vertically), but are of a different height than the logo, which should fill up 100% bar height. The text is the current page title.

The status bar height is a percentage of the total screen height and I cannot use fixed height. My current structure looks like this:

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

I've tried using display: table; and display: table-cell; where appropriate but the icon heights (set to 100%) end up filling up the entire screen unless I set them as position: absolute; which then prevents me from being able to put them side-by-side.

How can I place these components as shown (left-center-right) while centering everything vertically?

Solution

  • How's this?

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