Open In App
Related Articles

How to Center an Image using Tailwind CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes into the HTML code. In this article, we’ll see how to center an Image using Tailwind CSS. When working with images in web development, it’s common to need the ability to center an image within its container.

Approach 1: Using Flexbox Classes

The first approach to center an image is to use the flexbox classes of tailwind CSS. Flexbox is a powerful CSS layout model that allows you to easily center elements.

Tailwind CSS Flexbox Classes

  • flex: It sets the flexbox behavior on the container element to align and distribute the child elements within it.
  • justify-center: It centers the elements along the main axis (horizontally) and distributes any remaining space equally on both sides.
  • items-center: It centers the elements along the cross-axis (vertically) and ensures they are aligned in the middle of the container.

Syntax:

<div class="flex justify-center items-center">
<img src="img.jpg" alt="alternate text">
</div>

Example: Below example demonstrates how to center an image using flexbox in tailwind CSS.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to center an Image
        using Tailwind CSS ?
    </title>
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <script src=
        "https://cdn.tailwindcss.com">
      </script>
</head>
  
<body>
    <div class="text-center">
        <h1 class="text-green-600 text-5xl">
            GeeksforGeeks
        </h1>
        <h2 class="text-2xl">
            How to center an Image
            using Tailwind Classes
        </h2>
    </div>
  
    <div class="flex justify-center items-center pt-12">
        <img src=
             alt="gfg">
    </div>
</body>
  
</html>

                    

Output:

8.png

Approach 2: Using Positioning Classes

The second approach to center an image is to use the absolute positioning classes of Tailwind CSS. Tailwind CSS facilitates different Positioning classes for the element in order to control how an element is positioned in the DOM.

Tailwind CSS Position Classes:

  • relative: It creates a relative positioning context for the element, allowing you to position other elements inside it using absolute or relative positioning.
  • inset-0: It is a utility class that sets the top, right, bottom, and left properties of an element to 0.
  • m-auto: It is a margin utility class that sets the margin of an element to auto.

Syntax:

<div class="relative inset-0 flex">
<img src="img.jpg"
alt="alternate text"
class="m-auto">
</div>

Example: Below example demonstrates how to center an image using absolute positioning in Tailwind CSS.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to center an Image
        using Tailwind CSS ?
    </title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <script src=
        "https://cdn.tailwindcss.com">
      </script>
</head>
  
<body>
    <div class="text-center">
        <h1 class="text-green-600 text-5xl">
            GeeksforGeeks
        </h1>
        <h2 class="text-2xl">
            How to center an Image using
            Tailwind Classes
        </h2>
    </div>
  
    <div class="relative inset-0 flex pt-12">
        <img src=
             class="m-auto"
             alt="gfg">
    </div>
</body>
  
</html>

                    

Output:

8.png



Last Updated : 05 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads