CSS Vertical Alignment

CSS Vertical Alignment without knowing element's height or width, usign display:inline-block;

by Cupidvogel

HTML

<div id="container">
  <div id="aligned-middle" class="inline-block">Foobar</div>
  <div class="strut">&nbsp;</div>
</div>

CSS

#container {
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: yellow;
  width: auto;
}

#aligned-middle {
  /* essential for alignment */
  vertical-align: middle;
  /* decoration */
  /* perhaps, reapply inherited values, so your content is styled properly */
  line-height: 1;
  text-align: left;
}

/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */

#container .strut {
  /* parent's height */
  height: 30px;
  display: inline-block;
  /* for IE < 8, should be placed in separate stylesheet, via use of conditional comments */
  *display: inline;
  *zoom: 1;
}

.inline-block {
  display: inline-block;
  /* for IE < 8, should be placed in separate stylesheet, via use of conditional comments */
  *display: inline;
  *zoom: 1;
}