The text-align property is one of the most commonly used CSS properties in web development. It is used to align text within an HTML element. This property can be applied to any block-level element, such as <p>, <div>, <h1>, etc.
The text-align property has five possible values: left, right, center, justify, and initial. The default value is left, which means that the text is aligned to the left margin of the element.
Let's take a look at some examples of how the text-align property can be used:
In this example, the text is aligned to the left margin of the element:
<p style="text-align: left;">
This text is aligned to the left.
</p>
This text is aligned to the left.
In this example, the text is aligned to the right margin of the element:
<p style="text-align: right;">
This text is aligned to the right.
</p>
This text is aligned to the right.
In this example, the text is centered within the element:
<p style="text-align: center;">
This text is centered.
</p>
This text is centered.
In this example, the text is justified within the element:
<p style="text-align: justify;">
This text is justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
This text is justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
In this example, the text-align property is set to initial, which means that the text is aligned to the left margin of the element:
<p style="text-align: initial;">
This text is aligned to the left.
</p>
This text is aligned to the left.
The text-align property is a powerful tool for aligning text within HTML elements. It can be used to create a variety of different layouts and designs. By understanding how this property works, you can create more effective and visually appealing web pages.