How to set html text centering

Method: 1. Use the style attribute in the label and add the "text-align:center;" style to set the text to be horizontally centered; 2. Use the style attribute to add "vertical-align:middle;display:table -cell;" style setting is vertically centered.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Method 1: Use the style attribute to add the "text-align:center;" style

HTML style attribute specifies the inline style of the element

css The text-align attribute specifies the horizontal alignment of the text in the element, by using the center value to set the text to be centered.

Example:

<p style="height: 100px; border: 1px solid red;text-align: center;">文本文字--水平居中</p>

Rendering:

##Method 2: Use the style attribute and add "vertical- align:middle;display:table-cell;” style

vertical-align:middle display:table-cell can center both single-line text and multi-line text. However, because table-cell is an inline type, it will cause the original block-level elements to be moved to the same row per div. If you need to divide the rows into two rows, you need to add an additional container outside to control the position.

Example:

<div   style="max-width:90%">
文本文字--垂直居中
</div>

Rendering:

(Learning video sharing:

css video tutorial )

The above is the detailed content of How to set html text centering. For more information, please follow other related articles on the PHP Chinese website!