HTML align Attribute

The align attribute is used to specify the horizontal alignment of content within an HTML element. It was commonly used in older HTML versions but is now deprecated in HTML5.

• Specifies horizontal alignment (e.g., left, right, center, justify).
• Used with elements like <p>, <div>, <img>, <table>, etc.
• Deprecated in HTML5 - use CSS (text-align) instead.
• Helps control content positioning within elements.

Syntax

<element_name align="left | right | center | justify">

Attribute Values

• left: Aligns text to the left.
• right: Aligns text to the right.
• center: Aligns text to the center.
• justify: Stretches text so all lines have equal width.

Note: The align attribute is deprecated in HTML5, and styles should be used via CSS for better practices.

Using CSS for Alignment

While the align attribute is still supported in many browsers, CSS has become the preferred way to align elements in modern web development. Using CSS gives you more flexibility and control over your webpage layout.

1. Aligning Text with CSS

In modern web development, CSS is the preferred method for aligning text. The text-align property is used to control the alignment of text within an element. We can use this property to align text to the left, right, center, or justify it across the width of the container.

Syntax

text-align: left | center | right | justify;

• left: Aligns the text to the left (default for most elements).
• center: Aligns the text to the center of its container.
• right: Aligns the text to the right.
• justify: Stretches the text to align with both the left and right margins, ensuring that each line has the same width.

2. Aligning Images with CSS

Aligning images using CSS is a common practice in modern web design. We can use CSS to position images within their containers, and there are several methods for aligning images to the left, right, or center of the page or parent container.

Syntax

img {
 display: block | inline-block | inline;
 margin-left: auto;
 margin-right: auto;
}

• display: block;: Makes the image behave like a block element, which is necessary for centering.
• margin-left: auto; margin-right: auto;: Automatically adjusts the left and right margins to center the image.
• float: left;: Aligns the image to the left, allowing text to flow around it.
• float: right;: Aligns the image to the right, allowing text to wrap around it.

3. Aligning Tables with CSS

Aligning tables in CSS is straightforward and gives you control over how the entire table or individual cells are positioned within their containers. We can use the margin, text-align, and justify-content properties to adjust the table's position.

Syntax

table {
 margin-left: auto;
 margin-right: auto;
 text-align: center | left | right;
}

• margin-left: auto; margin-right: auto;: Centers the table horizontally within its parent container.
• text-align: center | left | right;: Aligns the content of the table cells.
• display: flex; justify-content: center;: Centers the entire table in a flex container.

Supported Tags

• <applet>
• <caption>
• <col>
• <colgroup>
• <hr>
• <iframe>
• <img>
• <legend>
• <table>
• <tbody>
• <td>
• <tfoot>
• <th>
• <thead>
• <tr>