HTML align Attribute

Last Updated : 26 Apr, 2025

In HTML, the align attribute is used to control the alignment of elements on a webpage. Whether it’s for text, images, or tables, the align attribute helps to position content in relation to its surrounding elements.

Syntax

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

Attribute Values

Attribute Values	Description
left	It sets the text left-align.
right	It sets the text right-align.
center	It sets the text center-align.
justify	It stretches the text of a paragraph to set the width of all lines equal.

This example shows the use of the align attribute.

html

<html>
<head>
    <title>
        HTML p align Attribute
    </title>
</head>
<body>
    <h1>GeeksforGeeks</h1>

    <h2>HTML p align Attribute</h2>

    <p align="left">
        Left align content
    </p>

    <p align="center">
        center align content
    </p>

    <p align="right">
        Right align content
    </p>

</body>
</html>

Output:

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:

HTML alt attribute

manaschhabra2

Improve

Article Tags :

HTML align Attribute

Using CSS for Alignment

1. Aligning Text with CSS

2. Aligning Images with CSS

3. Aligning Tables with CSS

Supported Tags:

Similar Reads

Thank You!

What kind of Experience do you want to share?