CSS H1 title center and right syntax

 The H1 title itself is actually a block. By default, it occupies one line of space. Although we cannot directly set the H1 title text to the center or right, we can design the H1 title through the relationship between the DIV blocks The effect of text centering. In order to clearly understand the method of centering or aligning the H1 title text, we first divide the program into "H1 title syntax" and "CSS text-align centering syntax", and then combine them to see the output result.

H1 header syntax

<h1>Here is the title of the example</h1>
Here is the content of the article...

The most important headings in web pages are usually marked with <h1> tags, please refer to: HTML H1 H2 H3 H4 H5 H6 headings .

CSS text-align centering syntax

<DIV style="text-align:center;"></DIV>

The DIV block label uses the syntax text-align:center, and all elements in it are centered. For detailed usage, please refer to: CSS text-align horizontal alignment .

CSS H1 Center and Right Syntax Combination

<div style="text-align:center;"><h1>Here is the centering example title</h1></div>
Here is the article content...... .....

<div style="text-align:right;"><h1>Here is the right example title</h1></div>
Here is the article content........... ..........

The output result is as

Here is the centering example title

Here is the content of the article...........

Here is the right example title

Here is the content of the article...........

It is obvious from the example that the reason why H1 can be centered or to the right is mainly because the upper DIV block sets the typesetting method of the text. The DIV block specifies that all internal elements must be centered or to the right, so < h1> The title text is also centered or to the right, which is different from the align preset in the early H1 tag.