<p>vertical-align:top;</p>
<div id="d1">
  <span>□</span>
  <div id="d1-2">
    <span>-●</span>
  </div>
</div>
<hr>

<p>vertical-align:middle;</p>
<div id="d2">
  <span>□</span>
  <div id="d2-2">
    <span>-●</span>
  </div>
</div>
<hr>

<p>vertical-align:bottom;</p>
<div id="d3">
  <span>□</span>
  <div id="d3-2">
    <span>-●</span>
  </div>
</div>
<hr>

<p>vertical-align:text-top;</p>
<div id="d4">
  <span>□</span>
  <div id="d4-2">
    <span>-●</span>
  </div>
</div>
<hr>

<p>vertical-align:text-bottom;</p>
<div id="d5">
  <span>□</span>
  <div id="d5-2">
    <span>-●</span>
  </div>
</div>
<hr>

<p>vertical-align:super;</p>
<div id="d6">
  <span>□</span>
  <div id="d6-2">
    <span>-●</span>
  </div>
  </div>
<hr>

<p>vertical-align:sub;</p>
<div id="d7">
  <span>□</span>
  <div id="d7-2">
    <span>-●</span>
  </div>
</div>
#d1, #d2, #d3, #d4, #d5, #d6, #d7,
#d1-2, #d2-2, #d3-2, #d4-2, #d5-2, #d6-2, #d7-2{
  background-color:silver;
  display:inline-block;
  font-size:50px;
  padding:px;
}
#d1-2, #d2-2, #d3-2, #d4-2, #d5-2, #d6-2, #d7-2{
  color:red;
  font-size:20px;
}
#d1-2{
  vertical-align:top;
}
#d2-2{
  vertical-align:middle;
}
#d3-2{
  vertical-align:bottom;
}
#d4-2{
  vertical-align:text-top;
}
#d5-2{
  vertical-align:text-bottom;
}
#d6-2{
  vertical-align:super;
}
#d7-2{
  vertical-align:sub;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.