How to align item baseline of the container ? Last Updated : 01 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> Output: Comment More infoAdvertise with us Next Article How to align item to the flex-end in the container using CSS ? P praveenbgp6 Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads How to align items at the center of the container using CSS ? Centering items in a container using CSS involves aligning elements horizontally and vertically within a parent element. This can be done using different CSS properties and techniques, ensuring that the content appears visually centered and balanced within its container. Here are some common approac 2 min read How to align-self element positioned at the baseline of the container ? 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 1 min read How to align item to the flex-end in the container using CSS ? Aligning items to the flex-end in a container using CSS helps create visually appealing layouts by ensuring content is positioned at the end of the container. To align items to the flex-end within a container using CSS, apply the justify-items: flex-end; property to the container. This shifts items 3 min read How to Right-align flex item? Flexbox is a CSS layout module that provides a way to easily align and distribute space among items in a container. The concept revolves around two main axes:Main-Axis: The primary axis along which the flex items are laid out.Cross-Axis: The perpendicular axis to the main axis.The direction and alig 2 min read How to align items in a flex container with JavaScript ? In CSS, the align-items property is used to align elements in a flex container. This can be similarly implemented using JavaScript by selecting the specific element using a selector method and then using the alignItems property to set the alignment. This can be useful in situations where dynamically 2 min read Blaze UI Containers Vertical Alignment Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is avai 2 min read Like