Ajax Loader
×
HTML 
<div class="vertical-align-all-child-elements">
1
<div class="vertical-align-all-child-elements">
2
  text with really small size
3
  <span class="one-line">oneline</span>
4
  <span class="two-line">two line content</span>
5
    <span class="one-line-width-tall-height">oneline tall height</span>
6
</div>
7
 
8
As in <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">W3C Vertical Align</a>, the <span class="quote">vertical-align:middle</span> is rendered as <span class="quote">Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.</span>. So to vertical align all the child elements (with various height), we set the font-size of the parent element to be very small until the <span class="quote">the difference between x-height and font-size is really small</span>.
 
CSS 
body {
1
body {
2
  font-family: arial;
3
}
4
.vertical-align-all-child-elements {
5
  border: 2px dotted #000;
6
  margin-bottom: 20px;
7
  font-size: 5px;
8
}
9
.vertical-align-all-child-elements span {
10
  font-size: 15px;
11
  display: inline-block;
12
  width: 60px;
13
  border: 1px solid #000;
14
  vertical-align: middle;
15
}
16
.vertical-align-all-child-elements .one-line-width-tall-height {
17
  height: 50px;
18
}
19
 
20
 
21
.quote {
22
  background: #444;
23
  padding: 0 3px;
24
  border-radius: 5px;
25
  font-style: italic;
26
  color: #DDD;
27
}
 

vertical aligning all child elements (with various heights)

CSSDeck G+