Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to set text center in css". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to set text center in css.

Let's first take a look at the vertical center of css single-line text.

For single-line text, we only need to set the text line height (line-height) and the region height (height) to be the same.

The implementation code for vertical centering of css single-line text:

HTML:

Php Chinese web single-line text is vertically centered

CSS:

# div1 {

Width:300px

Height:100px

Margin:50pxauto

Border:1pxsolidred

Line-height:100px;/* sets line-height to be equal to the height of the parent element * /

Text-align:center;/* sets text horizontal center * /

Overflow:hidden;/* prevents content from exceeding the container or generating automatic line wrapping * /

}

The vertical center effect of css single-line text is as follows:

2345 Screenshot 20180919132917.png

Then let's take a look at the vertical center of multi-line text.

Description: the vertical center of multi-line text is divided into two cases, one is the height of the parent element is not fixed, with the content changes; the other is the parent element is highly fixed.

1. The height of the parent element is not fixed

When the parent height is not fixed, the height can only be propped up by internal text. So, we can center the text vertically by setting the value of padding, as long as we set the value of padding-top to be equal to that of padding-bottom:

Css multiline text vertical center code:

HTML:

The vertical center of multi-line text in php Chinese network

The vertical center of multi-line text in php Chinese network

The vertical center of multi-line text in php Chinese network

The multi-line text of php is vertically centered.

CSS:

# div1 {

Width:300px

Margin:50pxauto

Border:1pxsolidred

Text-align:center;/* sets text horizontal center * /

Padding:50px20px

}

Thank you for reading, the above is the content of "how to set text center in css". After the study of this article, I believe you have a deeper understanding of how to set text center in css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.