如何将插图中嵌套的图像与figcaptions并排对齐？

Question

我试图并排对齐嵌套在图形元素中的多个图像。 我希望每个图像都有自己的标题。 但是，当我添加它们时，它们将停止并排对齐。 这是我当前的代码；

<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

希望这会有所帮助，至少对我有用。 我在bootstrap proyect中遇到了同样的问题，并且使用以下代码解决了该问题：

<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>

bootstrap.css中这些类的css是：

.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

如前所述，您不应该/不得在单个figure使用多个figcaption标签。

您可以将图像及其图像figcaption标签捆绑在嵌套的figure标签中。

<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

这不能回答您的问题，但是...请不要这样做。

<figure>只能嵌套一个元素

您可以有很多图像，但是每个图形都应该有一个标题。

对图形使用单个figcaption，或将标记更改为此：

<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

图中您不应使用多个figcaption

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>). 参见http://html5doctor.com/the-figure-figcaption-elements/

但是，如果您坚持要对每个图形使用多figcaption，则可以使用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

您可以执行以下操作...

在图中不要包含超过figcaption的内容。 参见http://html5doctor.com/the-figure-figcaption-elements/

将数字以div和span换行。

<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>

然后使用CSS对齐它。 请参见将跨度对齐

vertical-align:top;

您可以在这里尝试一下http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption

Answer 6

如果即使在使用带CSS和displaycaption标签的图片时，图像仍连续显示为之字形，请执行以下操作：

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

css:
.container{
 display: flex
}