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
CSS Central, Horizontal and Vertical Alignment
CSS provides various methods to align elements and their content horizontally, vertically, or centrally. Understanding these alignment techniques is essential for creating well-structured layouts.
Syntax
/* Horizontal alignment */ text-align: left | center | right; margin: 0 auto; float: left | right; /* Vertical alignment */ vertical-align: top | middle | bottom; display: flex; align-items: center;
Horizontal Alignment
Method 1: Text Alignment for Inline Elements
Inline elements such as text, spans, and links can be aligned using the text-align property ?
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 2px solid #333;
margin: 10px 0;
padding: 20px;
}
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
</style>
</head>
<body>
<div class="container left">Left aligned text</div>
<div class="container center">Center aligned text</div>
<div class="container right">Right aligned text</div>
</body>
</html>
Three bordered boxes appear with text aligned to the left, center, and right respectively.
Method 2: Margin Auto for Block Elements
Block-level elements can be centered horizontally using margin: 0 auto when they have a defined width ?
<!DOCTYPE html>
<html>
<head>
<style>
.centered-box {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
margin: 20px auto;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="centered-box">Centered Box</div>
</body>
</html>
A green rounded box with white text appears centered horizontally on the page.
Vertical Alignment
Method 1: Flexbox Alignment
Flexbox provides the most modern and flexible approach for vertical alignment ?
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
height: 200px;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
}
.flex-item {
background-color: #007bff;
color: white;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Centered Content</div>
</div>
</body>
</html>
A gray bordered container with a blue rounded box containing "Centered Content" appears perfectly centered both horizontally and vertically.
Method 2: Line Height for Single Line Text
For single-line text, setting line-height equal to the container height centers the text vertically ?
<!DOCTYPE html>
<html>
<head>
<style>
.line-height-container {
height: 120px;
line-height: 120px;
text-align: center;
background-color: #28a745;
color: white;
border: 2px solid #155724;
}
</style>
</head>
<body>
<div class="line-height-container">Vertically Centered Text</div>
</body>
</html>
A green box with white text "Vertically Centered Text" appears centered both horizontally and vertically using line-height.
Central Alignment (Both Horizontal and Vertical)
Combining horizontal and vertical alignment techniques creates perfect central alignment ?
<!DOCTYPE html>
<html>
<head>
<style>
.full-center {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border: 3px solid #333;
}
.center-content {
background-color: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
text-align: center;
}
</style>
</head>
<body>
<div class="full-center">
<div class="center-content">
<h3>Perfect Center</h3>
<p>This content is centered both ways!</p>
</div>
</div>
</body>
</html>
A colorful gradient container with a white rounded card containing "Perfect Center" heading and descriptive text appears centered both horizontally and vertically with a subtle shadow effect.
Conclusion
CSS offers multiple alignment methods, from simple text-align for inline elements to powerful flexbox for complex layouts. Choose the method that best fits your specific use case and browser support requirements.
4K+ Views
