Add Text Captions To Your Web Images with CSS

Published in: CSS

html image captionsWebsites like BBC or The New York Times always display images and pictures inside a box that is aligned either to the right or left of the web page.

You’ll also notice a 1-2 sentence long text caption just below the photograph containing brief description of the image, copyright information, etc.

There are two advantages of adding image captions in web pages:

1. Stylish and Read Friendly - Your visitors can easily get the context of the image from the small caption without having to read the full story.

2. SEO Friendly - Since captions describe the image in text and are located in close proximity to the image, they could be very effective in getting your images rank well on image search engines.

How to Add Text Captions and Align Images on Web Pages ?

With simple CSS and HTML, you can quickly add text captions to images very similar to BBC or Wikipedia:

Before we get into the code, here’s a snapshot of the end product. The Google logo is aligned to the right of the browser, is enclosed inside a box with borders that also contains a text caption.

css images and text captions

Here’s the HTML+CSS code for the above implementation:

Step 1: Add the following CSS code to an external CSS file or to your blog template under the <HEAD> section.

<style type="text/css">
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }

Step 2: Now insert the following HTML code anywhere in the web page. The process is exactly the same as inserting regular images but we have just enclosed that inside a <DIV> tag.

<div class="picture left" style="width:278px;"> <img src="google.gif" width="276" height="120" alt="Google Logo" /> <br />Image Caption goes here. </div>

In the above example, we add the file google.gif left aligned and the image has dimensions 276x120.

Replace left with right if you want to right align the image box. You’ll also need to modify the style:width of the <DIV> tag such it is equal to image width + 2.

You can also fiddle with the CSS to change the font name, size, border colors, background, margins, etc.

Also read - ”Useful HTML Tricks for Bloggers

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: CSS

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube