How to Center an Image using Tailwind CSS ?
Last Updated :
05 Jul, 2023
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=
</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:
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=
</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:
Share your thoughts in the comments
Please Login to comment...