CSS: horizontal AND vertical alignment
Long story short — vertical alignment is not straight forward in CSS.
The easiest way I have found is to use display: grid. Note you’ll have to play around with which elements are set to this. Often I need to set parent and child to grid , and parent will do the vertical alignment whilst the child does the horizontal alignment.
Take a look at the navbar in this CodePen I wrote for a demo.
/* horizontal alignment. Options are start, center, end */
/* vertical alignment. Options are start, center, end */