Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

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]


You may also like...