Be the first user to complete this post

  • 0
Add to List

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]



Also Read:

  1. Getting the parameters and arguments of a javascript function
  2. How to set a box shadow on left or right only or just on a single slide
  3. Why use javascript strict mode
  4. imperative vs declarative/functional programming
  5. Applying floats and clearfix to block elements