Vertical center

by Jason Park

HTML

<div style="background-color: lime;">
  <div style="display: inline-block; background-color:green; width: 30px; height: 30px; vertical-align: middle;">
  </div>
  <span style="vertical-align: middle;">Hello</span>
</div>

<hr />

<!-- For use align-content, container must have "flex-wrap: wrap". -->
<div style="display: flex; align-content: center; flex-wrap: wrap; background-color: beige; height: 100px">
  <div style="background-color: green; width: 30px; height: 30px;">

  </div>
  <div style="background-color: orange; width: 60px; height: 60px;">

  </div>

  <span style="">
    Hello
  </span>
</div>

<hr />

<div style="display: flex; align-items: center; flex-wrap: wrap; background-color: beige;">
  <div style="background-color: green; width: 30px; height: 30px;">

  </div>
  <div style="background-color: orange; width: 60px; height: 60px;">

  </div>

  <span style="">
    Hello
  </span>
</div>