How to vertically align text inside a flexbox using CSS?

How to Vertically Align Text Next to an Image using CSS ?

To vertically align text inside a flexbox means positioning the text centrally within the vertical space of a flex container. This is done using CSS properties such as `align-items` and `justify-content` to control the vertical alignment and centering of the text.

Here we have some common approaches:

Table of Content

Using align-items on the Container
Using align-self on the Item

Using align-items on the Container

Using align-items on the container aligns flex items along the cross-axis (vertically for a row-direction container). By setting align-items: center, you ensure all child elements of the flex container are vertically centered, making it a simple and effective alignment method.

Syntax:

align-items: center;

Example: In this example vertically center text within a flex container using align-items: center. The container has a height of 200px and a border for visualization.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Align Text Inside Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            align-items: center;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <p>Vertically Centered Text</p>
    </div>
</body>

</html>

Output:

vertically align text inside a flexbox using CSS Example Output

Using align-self on the Item

Using align-self on a flex item allows individual items to override the align-items property set on the container. By applying align-self: center; to a specific item, you can vertically center that item within the flex container independently of other items.

Syntax:

align-self: center;

Example: The example utilizes a flex container with display: flex, and the .flex-item class centers the item vertically with align-self: center. The specified height and border aid in visualizing the container.