Inline vertical alignment

by kmouse

HTML

<div class="wrapper">
  <span class="line">A <span class="outer"> B<span class="inner">C<sub>d</sub>E</span>F</span> G</span>
</div>

<div class="wrapper">
  <span class="line">A <span class="outer middle"> B<span class="inner">C<sub>d</sub>E</span>F</span> G</span>
</div>

<div class="wrapper">
  <span class="line">A <span class="outer text-top"> B<span class="inner">C<sub>d</sub>E</span>F</span> G</span>
</div>

CSS

sub {
  font-size: 10px;
  background: #ffd;
	vertical-align: sub;
}
span {
  border-top: 1px solid #3332;
  border-bottom: 1px solid #3332;
}
.wrapper {
  overflow: auto;
  resize: both;
  background-color: #eee;
  border: 8px solid #ccc;
  padding: 15px;
  margin-bottom: 2em;
}
.line {
	background: #fdd;
}
.outer {
  font-size: 30px;
  padding-bottom: 0px;
  background: #dfd;
}
.inner {
  font-size: 50px;
  background: #ddf;
}
.middle { vertical-align: middle; }
.text-top { vertical-align: text-top; }