css - vertically align text

Let's see the example on horizontally aligning the text using text-align: center as shown in the below pen. [codepen_embed height="345" theme_id="0" slug_hash="ONEPKQ" default_tab="css,result" user="kavitshah8"]See the Pen horizontally-aligned by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

To vertically align the text for a single line of text we can use the following technique. Trick 1 : set the line-height = height of the element to vertically align the single line as shown below. [codepen_embed height="266" theme_id="0" slug_hash="YqvXKZ" default_tab="css,result" user="kavitshah8"]See the Pen vertically-aligned by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

If you have two lines then you can use the following markup. And you can generalize the following markup for multiple lines. [codepen_embed height="266" theme_id="0" slug_hash="aNKOzv" default_tab="css,result" user="kavitshah8"]See the Pen two-lines-center by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

css 17 vertically-align 2