How to set text Center in css
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!
