Caption below image

HTML & CSS
1

Hi-
I’m fairly new to CSS and am trying to figure out how to position text beneath an image, specifically, I’d like add an image credit beneath the image.
I’m sure this is fairly easy, but I haven’t been able to find it on the forums or via a general Google Search. How do I do this? Thanks.

2

The easiest way i can think of is to use a paragraph tag and some simple CSS like the example below…

.mycaption {
    clear: left;
    margin-top: 10px;
    width: inherit;
}

What this will basically do is clear the flow of the paragraph tag to the next white-space area after the image and inherit the width of the parent container to the clear works. Depending on how your markup is written will depend on how the CSS behaves but if you have markup like the below example it will work fine.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
<!--
    .caption-wrap {
         width: 300px;
     }
    
    .caption-wrap p {
         margin-top: 10px;
         width: auto;
     }
-->
</style>
</head>
<body>

<div class="caption-wrap">
    <img src="path-to-image/my-image.jpg" height="180" width="300" />
    <p>This is a caption</p>
</div>

</body>
</html>
3

Welcome to Sitepoint.

You may want to try this code:


.imgNcap { float:left;
 padding:.25em ;
 border:1px solid #000; 
margin: 0 1em 1em 0; 
width:100px ; /* the width of your image ( you can put this code inline if your images vary in width*/
padding:10px}
[B].imgNcap  img {  display:block }[/B]/* this where the magic happens*/

and in the HTML

<p class="imgNcap"><img src="#" height=100 width=100 alt="" >your long  caption again</p>

I like this because it doesn’t use extra tags… and inf it fits your content you can turn the P tag and insert it into any paragraph like this:


	<p>	<span class="imgNcap" ><img src="#" height=100 width=100 alt="" >your long caption again</span>Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Hope that helps!

4

unfortunately, I couldn’t get either to work. The caption floats to the right of the image rather than below it.

Does it make a difference if I’m trying to do this within a blog post editor where I’m using an internal css rather than referring to an external style sheet (e.g., MarsEdit)?

I’ve also pasted the css code below if that’s helpful. Thanks again!

<style type=“text/css”>

body {font-family: Verdana, Arial, sans-serif; }

li {font-family: Verdana, Arial, sans-serif; }

img {float: left; margin: 1 2px; padding: 5px;}

</style>

<img src=“filepath.jpg” alt=“River small” title=“river_small.jpg” border=“0” width=“180” height=“240” alt=“river” />
<p>
Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

5

Could you post a link? Both solutions above will work if implemented properly, but they involve changing the HTML as well as the CSS.

6

I wrote a JQuery script to automatically generate an image caption below an image. It’s designed to create a

<figure>

and

<figcaption>

for an image based on the ALT tag. These are HTML5 elements so it will only work in HTML5.

I designed the script to work with content management systems (which often stick an image inside of a paragraph). See my tutorial on it here.

Not sure if this is what you’re looking for…but just in case.

-NorthK

7

Just use a DIV. If I wanted the image floated to the right, I would use:

<div style="float:right;margin:0 0 6px 18px;padding:4px;text-align:center;border:1px solid #000000;">
<img style="width:100px;height:100px;border:0;" src="#" alt="Grand Canyon" /><br />Photo by Yours Truely &amp; Company<br />
</div>

Make sure you adjust width, height, src, etc.

8

@northk: nice article. I look forward to reading that in detail. :slight_smile: