How do I align images nested in a figure with figcaptions side by side?

Question

I am trying to align several images that I have nested in a figure element side-by-side. I would like for each image to have its own, individual caption. However, when I add in the they stop aligning side-by-side. This is my current code;

<figure>
   <img src="image1.jpg" alt= "image1" width="195" height="195">
      <figcaption>image1</figcaption>
   <img src="image2.jpg" alt= "image2" width="195" height="195">
      <figcaption>image2</figcaption>
   <img src="image3.pjg" alt= "image3" width="195" height="195">
      <figcaption>image3</figcaption>
   <img src="image4.jpg" alt= "image4" width="195" height="195">
      <figcaption>image4</figcaption>
</figure>

Answer 1

Hope this can help, at least it works for me. I had the same problem in a bootstrap proyect and I've solved it using this code:

<ul class="list-unstyled list-inline text-center">
  <li>
    <img src="image1.jpg" alt= "image1" width="195" height="195">
    <figcaption>image1</figcaption>
  </li>
  <li>
    <img src="image1.jpg" alt= "image2" width="195" height="195">
    <figcaption>image2</figcaption>
  </li>
  <li>
    <img src="image3.jpg" alt= "image3" width="195" height="195">
    <figcaption>image1</figcaption>
  </li>
  <li>
    <img src="image1.jpg" alt= "image4" width="195" height="195">
    <figcaption>image4</figcaption>
  </li>
</ul>

The css for these classes in bootstrap.css is :

.list-unstyled {
        padding-left: 0;
        list-style: none;
    }
    .list-inline {
        padding-left: 0;
        margin-left: -5px;
        list-style: none;
    }
    .list-inline > li {
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
    }
    .text-center {
        text-align: center;
    }

Answer 2

As already stated before, you should not/ must not use multiple figcaption tag inside a single figure .

You could bundle your images and their figcaption tags inside nested figure tags.

<figure>
<figcaption>Caption for the bundle of images</figcaption>

    <figure>
    <img src="picture1.jpg" alt="Description of picture 1">
    <figcaption>Caption for Picture 1</figcaption>
    </figure>

    <figure>
    <img src="picture2.jpg" alt="Description of picture 2">
    <figcaption>Caption for Picture 2</figcaption>
    </figure>

</figure>

Answer 3

This doesn't answer your question, but... don't do that.

Only one element may be nested within a <figure>

You can have many images, but each figure should have a single caption.

Either use a single figcaption for the figure, or change your markup to this:

<figure>
   <img src="image1.jpg" alt= "image1" width="195" height="195">
   <figcaption>image1</figcaption>
</figure>
<figure>
   <img src="image2.jpg" alt= "image2" width="195" height="195">
   <figcaption>image2</figcaption>
</figure>
<figure>
   <img src="image3.pjg" alt= "image3" width="195" height="195">
   <figcaption>image3</figcaption>
</figure>
<figure>
   <img src="image4.jpg" alt= "image4" width="195" height="195">
   <figcaption>image4</figcaption>
</figure>

Answer 4

You shouldn't use more than one figcaption within figure

The <figcaption> element is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (eg, <img> or <code>). see http://html5doctor.com/the-figure-figcaption-elements/

but if you insist on using multi figcaption per figure, you can do that by using css float:left

<figure>
    <div style="float:left" >
      <img src="image1.jpg" alt= "image1" width="195" height="195">
      <figcaption>image1</figcaption>
    </div>
    <div style="float:left" >
        <img src="image2.jpg"  alt= "image2" width="195" height="195">
        <figcaption>image2</figcaption>
    </div>
    <div style="float:left" >
       <img src="image3.pjg" alt= "image3" width="195" height="195">
       <figcaption>image3</figcaption>
    </div>
    <div style="float:left" >
       <img src="image4.jpg" alt= "image4" width="195" height="195">
      <figcaption>image4</figcaption>
    </div>
</figure>

http://jsfiddle.net/ZQLCq/1/

Answer 5

You could do the following...

Do not include more than on figcaption in the figure. See http://html5doctor.com/the-figure-figcaption-elements/

Wrap the figures in divs and spans.

<div>
<span>
  <figure>
    <img src="image1.jpg" alt= "image1" width="195" height="195">
    <figcaption>image1</figcaption>
  </figure>
 </span>
 <span>
  <figure>
    <img src="image2.jpg" alt= "image1" width="195" height="195">
    <figcaption>image2</figcaption>
  </figure>
</span>
</div>

Then align it using css. See Align span next to each other

vertical-align:top;

You can play around with this here http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption

Answer 6

If your images are displaying like zigzag in a row even after using the figure and figurecaption tags with css display:inline-block then do the following

<div class="container">
  <figure>
   <img src="image.jpg" width=150px; height=150px;>
   <figcaption>image.jpg</figcaption>
  </figure>
</div>

css:
.container{
 display: flex
}