How to align text in Html
To align text in HTML, you can use the align
attribute or CSS styles. Here are a few methods to align text horizontally:
1. Using the align
attribute (deprecated in HTML5):
<p align="left">Left-aligned text</p>
<p align="center">Center-aligned text</p>
<p align="right">Right-aligned text</p>
In this example, the align
attribute is applied to the <p>
(paragraph) element to specify the alignment. However, note that the align
attribute is deprecated in HTML5, and it’s recommended to use CSS for styling instead.
2. Using CSS styles with the text-align
property:
<style>
.left-align {
text-align: left;
}
.center-align {
text-align: center;
}
.right-align {
text-align: right;
}
</style>
<p class="left-align">Left-aligned text</p>
<p class="center-align">Center-aligned text</p>
<p class="right-align">Right-aligned text</p>
Here, CSS classes are defined with the desired text-align
property values, and then applied to the respective HTML elements using the class
attribute.
3. Using inline CSS styles:
<p style="text-align: left;">Left-aligned text</p>
<p style="text-align: center;">Center-aligned text</p>
<p style="text-align: right;">Right-aligned text</p>
In this method, the style
attribute is used to apply the text-align
property directly to the HTML elements. The text-align
property can have values like left
, center
, right
, justify
, or initial
, depending on your desired alignment.
These methods can be used with various HTML elements like <p>
, <div>
, <h1>
to <h6>
, and others. Adjust the HTML element and alignment values according to your specific needs.
It’s important to note that the text alignment affects the block-level element containing the text and not the text itself.