HTML <div> align Attribute
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:
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 >w3wiki</ 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:
Supported Browsers:
- Google Chrome 1
- Microsoft Edge 12
- Firefox 1
- Opera 12.1
- Safari 1
Contact Us