How to center text in html

htmlMethods to center text: 1. Add the CSS attribute value "text-align:center" to the label where the text is located; 2. Add the CSS attribute value "text-align" to the inline label or inline block-level label :left".

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Two situations: 1. The text format is centered; 2. The label where the text is located is centered in the window.

1. Add the CSS attribute value "text-align:center" to the label where the text is located. For example:

<p style="text-align:center">我是文本，居中显示</p>

2. There are many methods, here are two methods, for example:

1) (Recommendation) The text should be wrapped by inline tags or inline block-level tags, inline tags or inline Block-level tags are in turn wrapped by block-level tags. This way the text format will be centered. If you want the text format not to be centered, you can add the CSS attribute value "text-align:left" or others to the inline label or inline block-level label.

<div style="text-align:center"> <!-- 块级标签 -->
    <span>我是文本所在标签1，文本居中显示<span> <!-- 行内标签 -->
    <div style="display:inline-block;">我是文本所在标签2，文本居中显示</div> <!-- 行内块级标签 -->
</div>

2) The text is wrapped in block-level tags. Set the width for the block-level tag and add the CSS property value "margin:0 auto". This way the text format will not be centered. If you want the text format to be centered, you can add the CSS attribute value "text-align:center" to the block-level tag.

<div style="width: 100px; margin:0 auto">我是文本所在标签，文本居中显示</div>

Learning video sharing: css video tutorial

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