How to Vertically Align Text Within a Div?-CSS Tutorial-php.cn

How to Vertically Align Text Within a Div?

Vertical Alignment of Text within a

In web development, it is often necessary to align text vertically within a

element. To achieve this there are several solutions available.

Using Line-Height:

One simple method is to use the line-height property. By setting line-height to the same value as the height of the

, the text will automatically align vertically in the center.

Example:

#abc {
  line-height: 50px;
}

Copy after login

Note: This method only works if there is a single line of text within the

Using Display: Table and Display: Table-Cell:

For multiple lines of text, a more versatile solution involves using the display: table and display: table-cell properties. This method involves wrapping the text within a and setting display: table-cell and vertical-align: middle.

Example:

#abc {
  display: table;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

Copy after login

Using Transform Property:

Another alternative is to use the transform property with the translateY() function. This involves setting the element's position to absolute, positioning it 50% from the top, and translating it from its axis with -50%.

Example:

#abc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Copy after login

Note: This method may not be supported by older browsers such as IE8.

The above is the detailed content of How to Vertically Align Text Within a Div?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：How to Center a DIV Horizontally and Vertically Without Clipping Content? Next article：Should You Avoid the CSS Star Selector for Better Performance and Maintainability?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn