Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we set the alignment according to surrounding elements in HTML?
The align attribute was used in older HTML versions to set the alignment of elements according to their surrounding content. However, this attribute is deprecated in HTML5, and CSS should be used instead for modern web development.
Note − The align attribute is deprecated in HTML5. Use CSS text-align, margin, or flexbox properties for alignment instead.
Legacy Align Attribute Syntax
The deprecated align attribute had the following syntax −
<tag align="value">Content</tag>
Where value could be:
-
left− Aligns content to the left -
right− Aligns content to the right -
center− Centers the content -
justify− Justifies text to both margins
Legacy Example with Align Attribute
Here is how the deprecated align attribute worked −
<!DOCTYPE html> <html> <head> <title>Deprecated Align Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p align="left">This paragraph is left-aligned.</p> <p align="center">This paragraph is center-aligned.</p> <p align="right">This paragraph is right-aligned.</p> <p align="justify">This paragraph is justified. The text stretches across the full width of the container, creating even margins on both sides.</p> <p><b>Note:</b> The align attribute is not supported in HTML5. Use CSS instead.</p> </body> </html>
The output shows different text alignments −
This paragraph is left-aligned.
This paragraph is center-aligned.
This paragraph is right-aligned.
This paragraph is justified. The text stretches across the full width of the
container, creating even margins on both sides.
Note: The align attribute is not supported in HTML5. Use CSS instead.
Modern CSS Text Alignment
The modern approach uses CSS text-align property to control text alignment −
.left-align { text-align: left; }
.center-align { text-align: center; }
.right-align { text-align: right; }
.justify-align { text-align: justify; }
Example − CSS Text Alignment
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Alignment</title>
<style>
.left-align { text-align: left; }
.center-align { text-align: center; }
.right-align { text-align: right; }
.justify-align { text-align: justify; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p class="left-align">This paragraph is left-aligned using CSS.</p>
<p class="center-align">This paragraph is center-aligned using CSS.</p>
<p class="right-align">This paragraph is right-aligned using CSS.</p>
<p class="justify-align">This paragraph is justified using CSS. The text distributes evenly across the container width, creating uniform spacing between words.</p>
</body>
</html>
The CSS approach produces the same visual result but follows modern standards −
This paragraph is left-aligned using CSS.
This paragraph is center-aligned using CSS.
This paragraph is right-aligned using CSS.
This paragraph is justified using CSS. The text distributes evenly across the
container width, creating uniform spacing between words.
Element Alignment with CSS
For aligning block elements (not just text), use CSS margin properties or flexbox −
Using Margin for Block Element Alignment
<!DOCTYPE html>
<html>
<head>
<title>Block Element Alignment</title>
<style>
.container { width: 100%; padding: 10px; }
.left-block { margin-left: 0; margin-right: auto; width: 200px; background: #e8f4fd; padding: 10px; }
.center-block { margin-left: auto; margin-right: auto; width: 200px; background: #fff2cc; padding: 10px; }
.right-block { margin-left: auto; margin-right: 0; width: 200px; background: #f2e8fd; padding: 10px; }
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<div class="left-block">Left-aligned block</div>
<div class="center-block">Center-aligned block</div>
<div class="right-block">Right-aligned block</div>
</div>
</body>
</html>
Using Flexbox for Modern Alignment
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Alignment</title>
<style>
.flex-container { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.flex-left { align-self: flex-start; background: #e8f4fd; padding: 10px; width: 200px; }
.flex-center { align-self: center; background: #fff2cc; padding: 10px; width: 200px; }
.flex-right { align-self: flex-end; background: #f2e8fd; padding: 10px; width: 200px; }
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="flex-container">
<div class="flex-left">Flexbox left alignment</div>
<div class="flex-center">Flexbox center alignment</div>
<div class="flex-right">Flexbox right alignment</div>
</div>
</body>
</html>
Comparison of Alignment Methods
| Method | Status | Use Case | Browser Support |
|---|---|---|---|
| align attribute | Deprecated | Legacy code only | Not supported in HTML5 |
| CSS text-align | Standard | Text alignment within elements | Universal support |
| CSS margin | Standard | Block element alignment | Universal support |
| CSS Flexbox | Modern | Complex layouts and responsive design | Modern browsers |
Conclusion
While the align attribute provided basic alignment functionality in older HTML versions, it is deprecated in HTML5. Modern web development uses CSS properties like text-align for text alignment, margin properties for block element positioning, and flexbox for advanced responsive layouts. These CSS approaches offer better control, maintainability, and separation of concerns.
755 Views
