Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to align an item set to its default value in CSS?
In CSS, aligning an item to its default value means ensuring that the item maintains the alignment specified by the parent container's "align-items" property. The default value for "align-items" is "stretch" but you can set it to other values like "center", "flex-start" and so on.
Approaches
We have three different approaches for align an item set to its default value in CSS include −
Using the “align-items:stretch”
Using the “align-self:auto”
Using the ”vertical-align:baseline”
Approach 1: Using the"align-items:stretch"
The first approach for aligning an item set to its default value in CSS is the "alignitems:stretch" property in CSS is used to stretch the items within a container to fill the full height of the container. This is the default value for the "align-items" property in a flex container. When an item is set to this value, it will stretch to fill the full height of the container, regardless of its own size.
Example
Here, we will go through a step-by-step example to implement this approach −
Step 1 − The container is defined as a flex container using the "display: flex" property. This enables the use of Flexbox layout on the container and its child items.
.container {
display: flex;
Step 2 − In the style.css file, use the align-items:stretch which tells the browser to stretch the items within the container to fill the full height of the container.
align-items: stretch;
Step 3 − Align the items within the "container" class element to the stretch of the container that contains child elements.
<div id="container"> <div class="item">Javascript</div> <div class="item">React</div> <div class="item">Angular</div> </div>
Step 4 − The final code would look like this −
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Align-items:stretch</title>
<style>
#container {
width: 250px;
height: 150px;
border: 1px solid black;
display: flex;
font-size: 20px;
align-items: stretch;
}
.item {
color: blue;
}
#container div {
flex: 1;
border: 1px solid black;
display: flex;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Javascript</div>
<div class="item">React</div>
<div class="item">Angular</div>
</div>
</body>
</html>
Approach 2: Using the "align-self:auto"
The second approach for aligning an item set to its default value in CSS is the "align-self:auto" property in CSS is used to align a single grid item within a grid container.The value auto is used to set the alignment of a grid item to its default value, which is determined by the value of the align-items property on the grid container.
Example
Here, we will go through a step-by-step example to implement this approach −
Step 1 − The code begins with the class selector of the item.
.item
Step 2 − In the style.css file, use the align-self:auto property is set to "auto" which means that the individual item will inherit the value of the parent container's "align-items" property.
align-self: auto;
Step 3 − Align the items within the "container" class element to the auto of the container that contains child elements.
<div id="container"> <div class="item">Javascript</div> <div class="item">React</div> <div class="item">Angular</div> </div>
Step 4 − The final code would look like this −
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Align-self:auto</title>
<style>
#container {
width: 250px;
height: 150px;
border: 1px solid black;
display: flex;
font-size: 20px;
}
.item {
align-self: auto;
color: blue;
}
#container div {
flex: 1;
border: 1px solid black;
display: flex;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Javascript</div>
<div class="item">React</div>
<div class="item">Angular</div>
</div>
</body>
</html>
Approach 3: Using the "vertical-align:baseline"
The third approach for aligning an item set to its default value in CSS is the "verticalalign:baseline" property in CSS is used to align elements vertically within a container. The "baseline" value of the property aligns the element's baseline with the baseline of the parent container.
Example
Here, we will go through a step-by-step example to implement this approach −
Step 1 − Create a container with the display property set to "table-cell".The vertical-align property is not supported in the flexbox layout, It is used in the table-cell layout.
#container {
display: table-cell;
}
Step 2 − In the style.css file, use the align-self:auto property is "baseline" on the individual item.
.item {
vertical-align: baseline;
}
Step 3 − Align the items within the "container" class element to the baseline of the container that contains child elements.
<div id="container"> <div class="item">Javascript</div> <div class="item">React</div> <div class="item">Angular</div> </div>
Step 4 − The final code would look like this −
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>vertical-align:baseline</title>
<style>
#container {
width: 250px;
height: 150px;
border: 1px solid black;
display: table-cell;
font-size: 20px;
}
.item {
vertical-align: baseline;
color: blue;
}
#container div {
flex: 1;
border: 1px solid black;
display: flex;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Javascript</div>
<div class="item">React</div>
<div class="item">Angular</div>
</div>
</body>
</html>
Conclusion
In this article, we examine how to align an item set to its default value in CSS using different approaches called align-items: stretch is used to align all the items of the container vertically, align-self: auto is used to align individual items to the default value of the parent container, and vertical-align: baseline is used to align elements vertically within a container.
489 Views
