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

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.

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.