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. Pure vs Impure functions
  2. css - align text to an image vertically
  3. css - align text to an image vertically
  4. Understanding callbacks in javascript
  5. Promise javascript examples
  6. Generators and Yield in es6
  7. gzip compress and cache api response in express
  8. Progressive enhancement vs Graceful degradation