Flex method for centering

Flex method fails for centering because multi-line text throws it off. All text aligns to the first baseline of text.

by Chris McGee

HTML

<p>Standard Ink Colors</p>
<ul class="color-list">
  <li id="thumb-red">Red</li>
  <li id="thumb-orange">Orange</li>
  <li id="thumb-athleticgold">Athletic Gold</li>
</ul>
<p>Be sure to specify Standard ink color above or provide us with your PMS ink number. </p>

CSS

.color-list li {
  width: 4em;
  height: 4em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#thumb-red {
  background-color: #CE1126;
}

#thumb-orange {
  background-color: #FE5000;
}

#thumb-athleticgold {
  background-color: #FFB81C;
}