Aligning Text Directly Under an Image in HTML: A Comprehensive Guide

When creating websites, one of the common challenges is aligning text directly under an image in a clean and responsive manner. This article will guide you through the process using HTML and CSS, explaining the steps and providing examples for various scenarios.

Basic Example of Aligning Text Under an Image

To align text directly under an image in HTML, you can use a combination of HTML and CSS to achieve a clean and responsive design. Here's how to do it:

HTML Structure

!DOCTYPE html
html lang
head
    meta charset
    meta name
    titleImage with Text Below/title
    style
        .image-container {
            text-align: center; /* Center the text under the image */
        }
        .image-container img {
            max-width: 100%; /* Responsive image */
            height: auto; /* Maintain aspect ratio */
        }
    /style
/head
body
    div classimage-container
        img src altDescription of the image/
        pYour text goes here/p
    /div
/body
/html

Explanation

HTML Structure

The image and the text are wrapped in a div with the class .image-container. The text is wrapped in a p tag which will contain your desired text.

Text Alignment

The CSS property text-align: center in the .image-container class centers the text directly under the image.

Responsive Image

The CSS properties max-width: 100% and height: auto ensure that the image is responsive and maintains its aspect ratio.

Alt Text

The alt attribute in the img tag provides a description of the image for accessibility.

Customization

Replace with the actual URL of your image. Modify the text inside the p tag to display your desired text.

Centering an Image Using text-align:center

To center an image using text-align: center, you must place the img inside a block-level element such as a div. Since the text-align: center property only applies to block-level elements, you place text-align: center on the wrapping block-level element to achieve a horizontally centered image.

Example

div classcentered-image-container
    img src altDescription of the image/
    pSome text here/p
/div

Responsive Images with Fixed Width

If you know the width of your image, you can use custom CSS to center the image and align the text:

HTML Structure

div 
    img src altDescription of the image/
    pSome text here/p
/div

CSS

.img-with-text {
    text-align: justify;
    width: [width of img];
}
.img-with-text img {
    display: block;
    margin: 0 auto;
}

Using Unordered Lists for Image and Text Layout

If you are laying out multiple photos with text under each of them, it is suggested to use an unordered list with each list item containing an image and a paragraph of text. Here's an example:

HTML Structure

ul
    li
        img src altDescription of image 1/
        pText for image 1 goes here/p
    /li
    li
        img src altDescription of image 2/
        pText for image 2 goes here/p
    /li
/ul

This structure makes the layout more organized and easier to manage, especially when you have multiple images with descriptive text.

Conclusion

By combining HTML and CSS, you can achieve a clean and responsive design when aligning text directly under an image. The examples provided will help you understand how to make your images and text align properly, ensuring a better user experience and accessibility.