How to center elements in a div along a baseline without a container in CSS ?

Last Updated : 22 May, 2023

Centering elements in a div along a baseline without a container can be achieved using various approaches. In this article, we will discuss some of the approaches to achieve this and provide examples for the same.

Method 1: Using Flexbox: One of the easiest ways to center elements along a baseline in a div is by using the Flexbox layout. We can use the display property with a value of flex to create a flexible container that can be used to center elements along a baseline. Then, we can use the justify-content property with a value of center to center the items horizontally and the align-items property with a value of baseline to center the items along the baseline.

Syntax:

div {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

In this syntax, we set the display property to flex to create a flex container. Then we set the justify-content property to center to horizontally center the flex items within the container. Finally, we set the align-items property to the baseline to align the items along the baseline.

Example: In this example we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Centering Elements Along a 
        Baseline using Flexbox
    </title>
 
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: baseline;
        }
 
        p {
            background-color: yellow;
            padding: 10px;
        }
 
        button {
            background-color: blue;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </center>
 
    <div class="container">
        <p>Centered Text</p>
        <button>Centered Button</button>
    </div>
</body>
</html>

Output:

How do I center elements in a div, along a baseline, without a container?

In this example, we’ve created a div with a class of .container and added two child elements to it, i.e. p element and a button element. Then we have applied the first syntax (using Flexbox) to the .container class to center these child elements along a baseline.

The p and button elements have been styled with some basic CSS to make them stand out on the page. You can add your own styles to these elements to customize the look and feel of your centered elements.

Method 2: Using CSS Grid: Another approach to center elements along a baseline in a div is by using CSS Grid. We can use the display property with a value of grid to create a grid container that can be used to center elements along a baseline. Then, we can use the justify-content property with a value of center to center the items horizontally and the align-items property with a value of baseline to center the items along the baseline.

Syntax:

div {
    display: grid;
    justify-content: center;
    align-items: baseline;
}

In this syntax, we set the display property to the grid to create a grid container. Then we set the justify-content property to center to horizontally center the grid items within the container. Finally, we set the align-items property to the baseline to align the items along the baseline.

Example 2: In this example, we are using the above approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Centering Elements Along a 
        Baseline using CSS Grid
    </title>
    <style>
        .container {
            display: grid;
            justify-content: center;
            align-items: baseline;
        }
 
        p {
            background-color: yellow;
            padding: 10px;
        }
 
        button {
            background-color: blue;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
    </center>
    <div class="container">
        <p>Centered Text</p>
        <button>Centered Button</button>
    </div>
</body>
</html>

Output:

How do I center elements in a div, along a baseline, without a container?

In this example, we’ve created a div with a class of .container and added two child elements to it: a p element and a button element. We’ve then applied the second syntax (using CSS Grid) to the .container class to center these child elements along a baseline. The p and button elements have been styled with some basic CSS to make them stand out on the page. You can add your own styles to these elements to customize the look and feel of your centered elements.