Just as you can control the distribution of elements along the main axis using the
justify-content property, you can control the alignment of elements along the cross axis. The alignment property is named
align-items. The options for alignment are easier to understand if there's extra space in the parent. Consider this horizontal parent whose children are aligned at the start of the cross axis:
align-items to these other possible values:
The default value is
stretch, but you are encouraged to explicitly set the value.
Sometimes you will want to align text elements, but the text may have may not be uniform in size or face. Aligning at the start of the cross axis doesn't produce the expected result:
In these situations, you can align the baselines of the text. A baseline is what typographers call the imaginary line on which all letters sit. Try setting