CSS Align
CSS alignment properties allow you to control the alignment of elements within their containers. This includes vertical and horizontal alignment as well as aligning text, images, and block elements.
Key Alignment Properties:
1. Text Align
The text-align property is used to align text within a block-level element (like a <div> or <p>).
Common Values:
• left: Aligns text to the left (default).
• center: Centers the text.
• right: Aligns text to the right.
• justify: Stretches the text so that each line has equal width.
Example:
Output:
In this example:
• The first <div> centers the text with a light yellow background and padding.
• The second <div> aligns the text to the right with a light blue background and padding.
2. Vertical Align
The vertical-align property aligns inline elements (like images or text) or content inside table cells vertically.
Common Values:
• baseline: Aligns with the baseline of the parent element (default).
• top: Aligns with the top of the element.
• middle: Aligns to the middle.
• bottom: Aligns with the bottom of the element.
Example:
<head>
<style>
.vertical-align-middle { vertical-align: middle; font-size: 20px;}
.vertical-align-top { vertical-align: top; font-size: 20px; }
.example-container { height: 50px; background-color: lightgray; margin-top:10px;}
</style>
</head>
<body>
<div class=”example-container”>
<img src=”https://via.placeholder.com/50″ alt=”Placeholder Image” class=”vertical-align-middle”>
<span class=”vertical-align-middle”>Text aligned to the middle.</span>
</div>
<div class=”example-container”>
<img src=”https://via.placeholder.com/50″ alt=”Placeholder Image” class=”vertical-align-top”>
<span class=”vertical-align-top”>Text aligned to the top.</span>
</div>
</body>
Output:
In this example:
• The first example aligns both the image and text in the middle of the container.
• The second example aligns both the image and text at the top of the container.
3. Align Items
The align-items property aligns items along the cross-axis (vertical by default) in a flex container.
Common Values:
• flex-start: Aligns items to the start of the container.
• center: Centers items in the container.
• flex-end: Aligns items to the end of the container.
• stretch: Stretches items to fill the container (default).
Example:
<head>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: lightgreen;
}
.align-items-center {
align-items: center;
background-color: lightcoral;
padding: 10px;
width: 200px;
}
.align-items-flex-end {
align-items: flex-end;
background-color: lightblue;
padding: 10px;
width: 150px;
}
</style>
</head>
<body>
<div class=”flex-container align-items-center”>
<div>Aligned Center</div>
</div>
<div class=”flex-container align-items-flex-end”>
<div>Aligned Flex-End</div>
</div>
</body>
Output:
In this example:
• The first container aligns its content (text “Aligned Center”) vertically in the center.
• The second container aligns its content (text “Aligned Flex-End”) vertically at the bottom.
4. Align Self
The align-self property allows individual flex items to override the align-items property of the container, aligning themselves independently.
Common Values:
• auto: Inherits the align-items value (default).
• flex-start: Aligns the item to the start of the container.
• center: Centers the item in the container.
• flex-end: Aligns the item to the end of the container.
• stretch: Stretches the item to fill the container.
Example:
<head>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: lightyellow;
}
.item {
background-color: lightcoral;
padding: 10px;
margin: 10px;
width: 100px;
}
.align-self-start {
align-self: flex-start;
}
.align-self-end {
align-self: flex-end;
}
</style>
</head>
<body>
<div class=”flex-container”>
<div class=”item align-self-start”>Align Self Start</div>
<div class=”item align-self-end”>Align Self End</div>
</div>
</body>
Output:
In this example:
• The first item, with the class align-self-start, is aligned at the top of the container.
• The second item, with the class align-self-end, is aligned at the bottom of the container.
5. Justify Content
The justify-content property aligns items along the main axis (horizontal by default) in a flex container.
Common Values:
• flex-start: Aligns items to the start of the container.
• center: Centers items in the container.
• flex-end: Aligns items to the end of the container.
• space-between: Distributes items evenly, with the first item at the start and the last item at the end.
• space-around: Distributes items evenly with equal space around them.
Example:
<head>
<style>
.flex-container {
display: flex;
background-color: lightblue;
padding: 10px;
}
.justify-content-center {
justify-content: center;
}
.justify-content-space-between {
justify-content: space-between;
}
.item {
background-color: lightcoral;
padding: 10px;
margin: 10px;
width: 100px;
}
</style>
</head>
<body>
<div class=”flex-container justify-content-center”>
<div class=”item”>Center 1</div>
<div class=”item”>Center 2</div>
</div>
<div class=”flex-container justify-content-space-between”>
<div class=”item”>Space 1</div>
<div class=”item”>Space 2</div>
<div class=”item”>Space 3</div>
</div>
</body>
Output:
In this example:
• The first item, with the class align-self-start, is aligned at the top of the container.
• The second item, with the class align-self-end, is aligned at the bottom of the container.
Conclusion
CSS alignment properties are essential for controlling the placement and positioning of elements within their containers. Whether you’re aligning text, images, or block elements, these properties provide the tools to create visually appealing and well-structured layouts.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Centering Text Horizontally
Objective: Center text inside a div horizontally using text-align.
Expected Output: The text should be centered horizontally within the div.
Output:
Scenario 2: Vertical Alignment in a Table Cell
Objective: Vertically align text in a table cell using vertical-align.
Expected Output: The text should be centered vertically within the table cell.
Output:
Scenario 3: Aligning Items in a Flexbox Container
Objective: Vertically align text in a table cell using vertical-align.
Expected Output: The text should be centered vertically within the table cell.
Output:
Scenario 4: Aligning Text and Images Horizontally with float
Objective: Align text to the right of an image using the float property.
Expected Output: The image should float to the left, and the text should be aligned to the right of it.
Output:
Scenario 5: Aligning Multiple Elements with Grid Layout
Objective: Align multiple elements in a grid layout, centering them horizontally and vertically.
Expected Output: The elements should be centered in each grid cell.
Output:
Scenario 6: Aligning a Button to the Right
Objective: Align a button to the right side of its container.
Expected Output: The button should be positioned on the far right of the container.
Output:
