How to vertically align text inside a flexbox?

Question

I would like to use flexbox to vertically align some content inside an

but not having great success.

I\'ve checked online and many of the tut

Answer 1

Set the display in li as flex and set align-items to center.

li {
  display: flex;

  /* Align items vertically */
  align-items: center;

  /* Align items horizontally */
  justify-content: center;

}

I, personally, would also target pseudo elements and use border-box (Universal selector * and pseudo elements)

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}