How to Center an Image using text-align Property in CSS ?

Last Updated : 20 Jun, 2024

Aligning an image horizontally within a container can sometimes be challenging. In this article, we will explore how to center an image using the text-align property in CSS.

Understanding the text-align Property

The text-align property in CSS is used to specify the horizontal alignment of text within an element. It can also be used to center inline and inline-block elements, including images, inside a block-level element or table-cell box.

Approaches to Center an Image

There are two main approaches to center an image using the text-align property:

Center an image using text-align: center property.
Center an image using display: block along with text-align: center property.

1. Center an Image using text-align: center Property

To center an image using the text-align: center property, we must place our image inside a block-level element such as Div and P tag.

Syntax:

.container {
    text-align: center;
}

Example: Here we are using a block-level element as a parent element of our image.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            text-align: center;
            border: 1px dashed;
            width: 400px;
            height: 600px;
        }
    </style>
</head>

<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
    <div class="container">
      
        <!-- Block parent element -->
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230417195924/unnamed.jpg"
             alt="placeholder image">
    </div>
</body>

</html>

Output:

2. Center an Image using display: block along with text-align Property

In the second approach, if our parent element is not a block-level element we use the display: block property along with the text-align property.

Syntax:

.container {
    text-align: center;
    display: block;
}

Example: Here our parent element is not a block element, so we use the display: block property along with the text-align property.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            text-align: center;
            display: block;
            border: 1px dashed;
            width: 400px;
            height: 600px;
        }
    </style>
</head>

<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
    <span class="container">
      
        <!-- Inline parent element -->
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230417195924/unnamed.jpg"
             alt="placeholder image">
    </span>
</body>

</html>

Output:

Centering an image horizontally within a container using CSS can be easily achieved with the text-align property. By applying text-align: center to the parent element, you can center images effectively. For non-block parent elements, using display: block along with text-align: center provides a reliable solution.