In this article, we will learn how to self-align an element at the baseline of the container. This can be achieved using the CSS align-self property. This property is a sub-part of the Flexbox module and helps to override the alignment of the specific flex item.
To align an element positioned at the baseline of the container, you can use the CSS property align-self with the value baseline. For example, align-self: baseline; will align the element along the baseline of the container, relative to other flex items. The baseline property can be used to align the element at the baseline of the container. Any other alignment can also be possible using the same approach.
Example: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html><html>
<head>
<style>
#flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
height: 250px;
}
#flex-container>div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div id="flex-container">
<div>A</div>
<!-- Self align the div to baseline -->
<div style="align-self: baseline">B</div>
<div>C</div>
</div>
</body>
</html>
|
Output: