CSS Properties: How to set the text alignment for elements

Last update on February 24 2024 12:26:57 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to set the text alignment for elements</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
h1 { /* Styles all h1 elements */
    text-align: center; /* Sets the text alignment to center */
}

h2 { /* Styles all h2 elements */
    text-align: left; /* Sets the text alignment to left */
}

h3 { /* Styles all h3 elements */
    text-align: right; /* Sets the text alignment to right */
} 
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p><strong>w3resource Tutorial</strong></p><!-- Displays a paragraph with bold text "w3resource Tutorial" -->
<h1>w3resource web development tutorial</h1><!-- Displays an h1 heading aligned to the center -->

<h2>w3resource web development tutorial</h2><!-- Displays an h2 heading aligned to the left -->

<h3>w3resource web development tutorial</h3><!-- Displays an h3 heading aligned to the right -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to set different text alignments for heading elements using CSS.
CSS comments are added to explain each section of the code.
The text-align property is used to set the alignment of text within the specified heading elements.
Each heading element (h1, h2, h3) has a different text alignment: center, left, and right, respectively.

Live Demo :

See the Pen text-align-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page