Like A Girl

Pushing the conversation on gender equality.

Code Like A Girl

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.

display: grid;
/* horizontal alignment. Options are start, center, end */
justify-items: center;
/* vertical alignment. Options are start, center, end */
align-items: end;