CSS Align
CSS alignment techniques are essential for positioning items and distributing space between content. These techniques include horizontal and vertical alignment using various properties such as margin: auto, position: absolute, text-align, and padding. This article covers multiple methods to achieve alignment in CSS.
Methods of Aligning in CSS:
1. Center Align Using Margin:
The margin: auto property centers a block element horizontally.
Note: Using margin: auto will not work in IE8 unless a !DOCTYPE is declared.
Example 1: This example describes the CSS align using the margin: auto property.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
w3wiki
</h1>
<h2>Center Align Elements</h2>
<div class="center">
This is div element on which
margin auto is used to horizontally
align it into center
</div>
</body>
</html>
Output:
2. Align Using Position:
The position: absolute property aligns elements relative to their containing block.
Note: The position properties top, bottom, left, and right will not work unless the position property is set first.
Example 2: This example describes the CSS align using the position: absolute; property.
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
w3wiki
</h1>
<h2>Right Align</h2>
<div class="right">
<p>
Absolute positioned elements
can overlap other elements.
</p>
</div>
</body>
</html>
Output:
3. Text Align:
The text-align: center property centers text within its container
Example 3: This example describes the CSS align using the text-align: center; property.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align: center;">
w3wiki
</h1>
<h2>BOTH TEXTS ARE AT CENTER</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>
</html>
Output:
4. Vertical Align Using Padding:
The padding property can be used to center elements vertically.
Example 4: This example describes the CSS align using the padding property.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align:center;">
w3wiki
</h1>
<h2>Center Vertically</h2>
<div class="center">
<p>This is vertically centered.</p>
</div>
</body>
</html>
Output:
5. Combined Vertical and Horizontal Align:
Combining padding and text-align: center to center elements both vertically and horizontally.
Example 5: This example describes the CSS align using the padding & text-align properties.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color:green;">
w3wiki
</h1>
<p>
Here we use padding and
text-align to center the
div element vertically
and horizontally:
</p>
<div class="center">
<p>
This text is vertically
and horizontally centered.
</p>
</div>
</body>
</html>
Output:
CSS alignment techniques provide a range of options for positioning elements and managing the space between them. Understanding and using properties like margin, position, text-align, and padding effectively can significantly enhance the layout and design of web pages.
Supported Browser:
- Google Chrome 95.0
- Microsoft Edge 95.0
- Firefox 93.0
- Opera 80.0
- Safari 15.0
Contact Us