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 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.
Syntax
/* For container-level alignment */
.container {
align-items: stretch; /* default value */
}
/* For individual item alignment */
.item {
align-self: auto; /* inherits from parent */
}
/* For inline/table-cell elements */
.element {
vertical-align: baseline; /* default value */
}
Approaches
We have three different approaches for aligning an item set to its default value in CSS
Using
align-items: stretchUsing
align-self: autoUsing
vertical-align: baseline
Method 1: Using align-items: stretch
The align-items: stretch property stretches flex items to fill the full height of the container. This is the default value for the align-items property in a flex container.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 300px;
height: 150px;
border: 2px solid black;
display: flex;
align-items: stretch; /* default value */
font-size: 16px;
}
.item {
flex: 1;
border: 1px solid blue;
background-color: #f0f8ff;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Javascript</div>
<div class="item">React</div>
<div class="item">Angular</div>
</div>
</body>
</html>
Three equally-sized boxes stretch to fill the full height of the container, with text centered in each box.
Method 2: Using align-self: auto
The align-self: auto property makes an individual item inherit the value of the parent container's align-items property. This is the default value for align-self.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 300px;
height: 150px;
border: 2px solid black;
display: flex;
align-items: center;
font-size: 16px;
}
.item {
flex: 1;
border: 1px solid green;
background-color: #f0fff0;
color: #333;
text-align: center;
padding: 10px;
align-self: auto; /* inherits parent's align-items: center */
}
</style>
</head>
<body>
<div id="container">
<div class="item">Javascript</div>
<div class="item">React</div>
<div class="item">Angular</div>
</div>
</body>
</html>
Three boxes are centered vertically within the container, inheriting the center alignment from the parent.
Method 3: Using vertical-align: baseline
The vertical-align: baseline property aligns inline or table-cell elements to their baseline. This is the default value for vertical-align.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 300px;
height: 150px;
border: 2px solid black;
display: table-cell;
font-size: 16px;
vertical-align: middle;
}
.item {
display: inline-block;
border: 1px solid red;
background-color: #fff5f5;
color: #333;
padding: 8px 12px;
margin: 5px;
vertical-align: baseline; /* default value */
}
</style>
</head>
<body>
<div id="container">
<span class="item">Javascript</span>
<span class="item">React</span>
<span class="item">Angular</span>
</div>
</body>
</html>
Three inline boxes aligned to their baseline within a table-cell container.
Conclusion
These three approaches demonstrate different ways to achieve default alignment behavior: align-items: stretch for flex containers, align-self: auto for individual flex items, and vertical-align: baseline for inline elements. Choose the method that matches your layout context.
939 Views
