How to Write a Caption Under an Image

What is the correct way to add caption to an image using html5

I would use the <figure> method as it has more semantic meaning than the div / span example.

<figure class="image">
  <img src="http://[..]" />
  <figcaption>I am an image caption</figcaption>
</figure>

http://jsfiddle.net/duncan/KYTWS/

related, although about blockquotes, http://alistapart.com/blog/post/more-thoughts-about-blockquotes-than-are-strictly-required

Display image caption on the bottom of the image

i would suggest to do it like that position: absolute; for the figcaption not the img that the figure can take the width of the img

figure {  border: 1px solid;  display: inline-block;  margin: 0;  position: relative;}
figcaption {  position: absolute;  bottom: 1em;  left: 0;  background-color: yellow;  width: 100%;}

<figure class="fig">    <img src="http://placehold.it/500x200" class="fig__media"/>
    <figcaption class="image-caption-text">Some caption</figcaption></figure>

Using an image caption in Markdown Jekyll

If you don't want to use any plugins (which means you can push it to GitHub directly without generating the site first), you can create a new file named image.html in _includes:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

And then display the image from your markdown with:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}

How to place a text next to image with caption on bottom

The html element to use here is the figure element - this allows for an image and related content to be shown and then a caption to be presented that is either the first or last child. All elements can be styled.

In your case - you want to have an image and text positioned horizontally and then the caption below it all. So wrap the image and desired text in a div - apply display: flex to that to get it to be aligned horizontally (no need for floats or clearning floats with flexbox);

Then the figcaption sits below and is as wide as the entire figure.

figure {
 background-color: grey;
 border: solid 1px black
}

#img-div {
 display: flex;
 padding: 8px
}
#image {
  border: groove;
  width: 200px;
}

#img-quote {
  flex-grow: 1;
  padding: 8px
}

figcaption {
  background: white;
  padding: 8px;
}

<figure>
  <div id="img-div">
    <img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
    <p id="img-quote">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</p>
  </div>
  <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit.</figcaption>
</figure>

How to align caption underneath image

I would set up the code this way:

<figure>
    <img src='http://placehold.it/200x200' alt='missing' />
    <figcaption>Album name goes here
        <br>Year goes here
        <br>artist name goes here</figcaption>
</figure>

and apply the following CSS:

figure {
    display: inline-block;
    border: 1px dotted gray;
    margin: 20px; /* adjust as needed */
}
figure img {
    vertical-align: top;
}
figure figcaption {
    border: 1px dotted blue;
    text-align: center;
}

Because each figure is an inline-block, you can basically repeat the unit three times per row, either adding a <br> after the every third one, or wrapping three in a block element, or using a CSS3 nth-of-type(3n) selector to add a line break or similar.

Use text-align: center on figcaption to align the test to the center.

See demo at: http://jsfiddle.net/audetwebdesign/4njG8/

The results look like this (for a wide enough screen):

Adding caption under images that have been cropped to circle in CSS

You can use the figcaption tag

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption

<center>
 <figure>
  <img class="centered-and-cropped"  src="image.jpg" alt="Bear1">
  <figcaption>Bear1.</figcaption>
 </figure>
 <figure>
  <img class="centered-and-cropped"  src="image.jpg" alt="Bear2">
  <figcaption>Bear2.</figcaption>
 </figure>
 <figure>
  <img class="centered-and-cropped"  src="image.jpg" alt="Bear3">
  <figcaption>Bear3.</figcaption>
 </figure>
</center>

---

Related Topics