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 exam­ple on hor­i­zon­tally align­ing the text using text-align: cen­ter as shown in the below pen.

See the Pen horizontally-aligned by Kavit Shah (@kavitshah8) on Code­Pen.


To ver­ti­cally align the text for a sin­gle line of text we can use the fol­low­ing technique.

Trick 1 : set the line-height = height of the ele­ment to ver­ti­cally align the sin­gle line as shown below.

See the Pen vertically-aligned by Kavit Shah (@kavitshah8) on Code­Pen.


If you have two lines then you can use the fol­low­ing markup. And you can gen­er­al­ize the fol­low­ing markup for mul­ti­ple lines.

See the Pen two-lines-center by Kavit Shah (@kavitshah8) on Code­Pen.


You may also like...