Skip to content
Related Articles

Related Articles

Improve Article

How to align-self element positioned at the baseline of the container ?

  • Last Updated : 06 Apr, 2021

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, defined by the container. 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:

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :