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. nodejs: generate uuid / guid
  2. position:absolute
  3. How to horizontally center a flexible width button using only css
  4. css - circular profile pictures
  5. Getting started with localStorage vs sessionStorage in html5