How to align item baseline of the container ?

Last Updated : 01 Jun, 2023

In this article, we will learn how to align items to the baseline of the container. There are three types of alignments in CSS, baseline alignment, positional alignment, and distributed alignment. The Baseline alignment is used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with justify/align-content and also for self-alignment with justify/align-self.

Syntax: There are three keywords that can be used to set the baseline alignment of items in a container as shown in the syntax below.

.container {
  align-items: baseline | first baseline | last baseline;
}

The below examples demonstrate this approach:

Example 1: In this example, the items are aligned to the baseline of the container.

HTML

<html>
<head>
    <style>
        div {
            padding: 12px;
            margin: 2px;
        }
 
        /* The container element */
        #container {
            width: 500px;
            height: 300px;
            padding: 10px;
            border: 2px solid black;
            display: flex;
            align-items: baseline;
        }
 
        /* Item elements in the container*/
        #item1 {
            color: bold black;
            border: 5px solid red;
            background-color: yellow;
        }
 
        #item2 {
            color: bold red;
            border: 5px solid green;
            background-color: orange;
        }
 
        #item3 {
            color: bold red;
            border: 5px solid red;
            background-color: lightblue;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <div id="item1">Text One</div>
        <div id="item2">
              Text Two with baseline alignment.
          </div>
        <div id="item3">Text Three</div>
    </div>
</body>
</html>

Output:

Example 2: In this example, the items are aligned to the first baseline of the container.

HTML

<html>
<head>
    <style>
        div {
            padding: 12px;
            margin: 2px;
        }
 
        /* The container element */
        #container {
            width: 500px;
            height: 300px;
            padding: 10px;
            border: 2px solid black;
            display: flex;
            align-items: first baseline;
        }
 
        /* Item elements in the container*/
        #item1 {
            color: bold black;
            border: 5px solid red;
            background-color: yellow;
        }
 
        #item2 {
            color: bold red;
            border: 5px solid green;
            background-color: orange;
        }
 
        #item3 {
            color: bold red;
            border: 5px solid red;
            background-color: lightblue;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <div id="item1">Text One</div>
        <div id="item2">
            Text Two with first
            baseline alignment.
        </div>
        <div id="item3">Text Three</div>
    </div>
</body>
</html>

Output:

Example 3: In this example, the items are aligned to the last baseline of the container.

HTML

<html>
<head>
    <style>
        div {
            padding: 12px;
            margin: 2px;
        }
 
        /* The container element */
        #container {
            width: 500px;
            height: 300px;
            padding: 10px;
            border: 2px solid black;
            display: flex;
            align-items: last baseline;
        }
 
        /* Item elements in the container*/
        #item1 {
            color: bold black;
            border: 5px solid red;
            background-color: yellow;
        }
 
        #item2 {
            color: bold red;
            border: 5px dashed green;
            background-color: orange;
        }
 
        #item3 {
            color: bold red;
            border: 5px solid red;
            background-color: lightblue;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <div id="item1">Text One</div>
        <div id="item2">
            Text Two with last
            baseline alignment.
        </div>
        <div id="item3">Text Three</div>
    </div>
</body>
</html>