Be the first user to complete this post
|
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:
- Getting the parameters and arguments of a javascript function
- How to set a box shadow on left or right only or just on a single slide
- Why use javascript strict mode
- imperative vs declarative/functional programming
- Applying floats and clearfix to block elements