How to centre caption underneath image with TailwindCSS

When using Tailwind CSS, you can implement the layout for images and titles using utility classes. Specifically, to center a title below an image, follow these steps:

Step 1: Create a Container

First, we need a container to wrap the image and title, ensuring they are laid out as a single unit.

html
<div class="flex flex-col items-center">
  <!-- Image -->
  <!-- Title -->
</div>

Here, flex creates a flexible layout container, flex-col ensures child elements (the image and title) stack vertically, and items-center ensures all child elements are horizontally centered.

Step 2: Insert the Image

Within this container, first insert the image element:

html
<img src="path/to/image.png" alt="Descriptive Alt Text" class="max-w-full h-auto">

Here, max-w-full ensures the image width does not exceed the container's width, and h-auto maintains the image's original aspect ratio.

Step 3: Add the Title

Add the title below the image:

html
<p class="text-center mt-2">
  This is the image title
</p>

The text-center class ensures the title text is centered within its container. The mt-2 class adds a small top margin to visually separate the title from the image.

Complete Code Example

Combining the above steps, our HTML structure will be as follows:

html
<div class="flex flex-col items-center">
  <img src="path/to/image.png" alt="Descriptive Alt Text" class="max-w-full h-auto">
  <p class="text-center mt-2">
    This is the image title
  </p>
</div>

By doing this, we not only maintain code simplicity but also quickly achieve the desired layout using Tailwind CSS utility classes. The advantage of this approach is that it is responsive-friendly and allows easy adjustment of layout and styles by modifying the utility classes, making it convenient for iteration and maintenance in projects.