如何將插圖中嵌套的圖像與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
}