HTML <div> align Attribute
Last Updated :
02 Jan, 2024
The HTML div align Attribute is used to specify the alignment of the <div> element or the content present inside the div Element. The align attribute in the <div> element specifies the horizontal alignment of its content.
Note: This attribute is not supported by HTML5.
Syntax:Â
<div align="left | right | center | justify";>
Attribute Values:
|
left
|
It sets the content to the left-align.
|
|
right
|
It sets the content to the right-align.
|
|
justify
|
It sets the content to the justify position.
|
|
center
|
It sets the div element to the center. By default, it is set to center.
|
Example 1:Â In this example, we will see the implementation of the above tag with an example.
html
<!DOCTYPE html>
<html>
<head>
<title>HTML | <div> 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><div>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 | <div> 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>
|
Output:
Output
Supported Browsers:
- Google Chrome 1
- Microsoft Edge 12
- Firefox 1
- Opera 12.1
- Safari 1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...