How to set the text center up and down by html5
This "html5 how to set text up and down center" article knowledge points most people do not understand, so the editor summed up the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "html5 how to set text up and down center" article.
Setting position to absolute is equivalent to changing the element into inline-block, so the width does not occupy the entire line.
You can add width manually if necessary
Display:inline-block
Width:200px
Height:100px
1. Centered horizontally and vertically
You can use line-height for single-line text
Text-align:center
Line-height:100px
Multiline text
Display: flex
Justify-content: center
Align-items: center
This is to treat multiline text as a whole horizontal and vertical center, so not every line of text is horizontally centered.
2. Center horizontally and vertically in the container
Position: absolute
Top:50%
Left:50%
Margin-left:-100px
Margin-top:-50px
Specify container width and height, block elements
1. Centered horizontally and vertically
Single-line text
Display:block
Width:200px
Height:100px
Text-align:center
Line-height:100px
Multiline text
Display: flex
Justify-content: center
Align-items: center
2. Center horizontally and vertically in the container
Position: absolute
Top:50%
Left:50%
Margin-left:-100px
Margin-top:-50px
Or
Margin:0 auto
The above is about the content of this article on "how to set text up and down in html5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.
