<div class="middle">
  <h2>Middle</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="top">
  <h2>Top</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="bottom">
  <h2>Bottom</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="sub">
  <h2>Sub</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="super">
  <h2>Super</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="text-top">
  <h2>Text Top</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="text-bottom">
  <h2>Text Bottom</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="baseline">
  <h2>Baseline</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="pixel">
  <h2>30px</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>

<div class="percentage">
  <h2>-500%</h2>
  <img src="http://placekitten.com/100/100">
  <img src="http://placekitten.com/200/150">
  <img src="http://placekitten.com/220/80">
</div>
  

.middle > * {
  vertical-align: middle;
}

.top > * {
  vertical-align: top;
}

.bottom > * {
  vertical-align: bottom;
}

.sub > * {
  vertical-align: sub;
}

.super > * {
  vertical-align: super;
}

.text-top > * {
  vertical-align: text-top;
}

.text-bottom > * {
  vertical-align: text-bottom;
}

.baseline > * {
  vertical-align: baseline;
}

.pixel > * {
  vertical-align: 30px;
}

.percentage > * {
  vertical-align: -500%;
}


body {
  padding: 20px;
  background: #eee;
}

h2 {
  display: inline-block;
  margin: 0;
  width: 150px;
  text-align: right;
  font: bold 20px Sans-Serif;
}

div {
  margin: 0 0 30px 0;
  padding: 10px;
  background: white;
  white-space: nowrap;
}