Add Text Captions to Your Web Images with CSS

Add Text Captions to Your Web Images with CSS

Learn how to align your images on web pages and add text captions to the picture similar to what you have seen on Wikipedia, BBC or The New York Times.

Websites such as BBC or The New York Times always display images and images inside a box that are either the right or the left side of the web page.

Add Text Captions to Your Web Images
Add Text Captions to Your Web Images

You will also see a 1-2-sentence text caption below the picture that includes a brief description of the image, copyright information etc.

There are two benefits to adding image captions to web pages:

  1. Read Stylish and Friendly – Your visitor can easily get reference of the image from small captions without reading the whole story.
  2. SEO Friendly – Since the captions describe the image in the text and are located in close proximity to the image, they can be very effective in ranking your images properly on the search engines of images.

How to align text captions and images on web pages?

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

Before coming into the code, here is a snapshot of the final product. Google logo is aligned to the right side of the browser, which is enclosed inside the borders box, which includes text captions.

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

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

<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. This process is similar to inserting regular images, but we have just inserted it under 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 an alliance file to google.gif and the dimension is 276 × 120 in the image.

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 get annoyed with CSS to change font names, shapes, border colors, backgrounds, margins etc.

Shares 0

Leave a Reply

Your email address will not be published. Required fields are marked *