HTML <div> align Attribute

HTML <div> align Attribute

Last Updated : 15 Sep, 2024

The HTML <div> align attribute was used to specify the horizontal alignment of content within a <div> element. However, this attribute is no longer supported in HTML5. Today, we use CSS for alignment purposes.

Note: This attribute is not supported by HTML5.

Syntax

<div align="left | right | center | justify">
    <!-- Content here -->
</div>

Attribute Values

Attribute	Values
left	Aligns the content to the left.
right	Aligns the content to the right.
justify	Centers the content. This is the default value.
center	Justifies the content, which means it adjusts the spacing between words to align the text evenly along both the left and right edges.

Different Examples of HTML <div> align Attribute

Example 1: In this example, we will see the implementation of the above tag with an example.

html

<!DOCTYPE html>
<html>
    <head>
        <title>HTML align Attribute</title>
        <style type=text/css>
            p {
            background-color: gray;
            margin: 10px;
            }
            div {
            color: white;
            background-color: 009900;
            margin: 2px;
            font-size: 25px;
            }
            body {
            text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>GeeksForGeeks</h1>
        <h2>align Attribute</h2>
        <div align="center"> 
            div align="center"
        </div>
        <div align="left">
            div align="left" 
        </div>
        <div align="right">
            div align="right" 
        </div>
        <div align="justify">
            div align="justify" 
        </div>
    </body>
</html>

Output : Example 2: In this example, we will see the implementation of above tag with an example.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML align Example</title>
    <style type="text/css">
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

        #container {
            width: 500px;
            border: 2px solid #333;
            margin: 20px auto;
            padding: 10px;
            background-color: #f0f0f0;
        }

        #left {
            text-align: left;
            background-color: #66ccff;
        }

        #center {
            text-align: center;
            background-color: #5bd45b;
        }

        #right {
            text-align: right;
            background-color: #e74242;
        }

        #justify {
            text-align: justify;
            background-color: #f8c28b;
        }
    </style>
</head>

<body>
    <h1>div align Example</h1>
    <div id="container">
        <div id="left">
            Left Aligned
        </div>
        <div id="center">
            Center Aligned
        </div>
        <div id="right">
            Right Aligned
        </div>
        <div id="justify">
            Justified Content. Justify and left have
            difference when you see the text
            written with justify, it basically
            stretches to the right corner by
            eliminating the extra spaces and fits
            in the div container.
        </div>
    </div>
  </body>
</html>

Output:

Screenshot-2023-12-11-094841 — Output

Supported Browsers:

Google Chrome 1
Microsoft Edge 12
Firefox 1
Opera 12.1
Safari 1

HTML <div> align Attribute

M

manaschhabra2

Improve

Article Tags :

Similar Reads

HTML <p> align Attribute

The align attribute in the HTML <p> tag is used to control the alignment of paragraph text. It allows you to align text to the left, center, or right of its container. This attribute helps in adjusting the text layout for better presentation and readability. Syntax:<p align="left | right |

HTML | <col> align Attribute

The HTML <col> align Attribute is used to set the horizontal alignment of text content inside the col element. It is not supported by HTML 5. Syntax: <col align="left | right | center | justify | char"> Attribute Values: left: It sets the text left-align. right: It sets the text right-al

HTML <td> align Attribute

In HTML, the <td> (table data) element is used to define an individual cell within a table row (<tr>). It plays a crucial role in organizing and presenting structured data clearly. Whether displaying numerical values, text, or percentagesâ€”such as 85% for progress or success ratesâ€”the

HTML <tr> align Attribute

TheÂ HTML <tr> align AttributeÂ is used toÂ set the horizontal alignment of text content inside the table row. The HTML <tr> element itself doesn't have an align attribute. For aligning content within a table row, use the CSS text-align property on the individual <td> or <th> el

HTML <th> align Attribute

The HTML <th> align Attribute is used to set the horizontal alignment of text content inside the table header cell. Instead, use CSS for alignment properties such as text-align to specify the horizontal alignment and vertical-align for vertical alignment within table headers.Note: The align at