7 ways to vertically center text in CSS

1. Problem description: When the height is fixed or not fixed, it is difficult to achieve vertical centering of single-line or multi-line text;

Second, the solution:

1. Use the line-height property to set the line-height to be the same height as the element height.

Limitations: Only applicable to single-line text, with great limitations.

Code:

 .box { height : 100px ; line-height : 100px ; white-space : nowrap ; }

2.padding: Set equal upper and lower padding values.

Limitations: Cannot be vertically centered when there is a height limit.

Code:

 .box { padding-top : 30px ; padding-bottom : 30px ; }

3. Absolute positioning center: top:0; bottom:0; left:0; right:0; margin:auto;

The post CSS 7 Ways to Center Text Vertically first appeared on Lenix Blog .

This article is reprinted from https://blog.p2hp.com/archives/8694
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment

Your email address will not be published.