Cover Image for How to align text in Html
125 views

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):

HTML
 <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:

HTML
 <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:

HTML
 <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.

YOU MAY ALSO LIKE...

The Tech Thunder

The Tech Thunder

The Tech Thunder


COMMENTS