如何將圖形中嵌入的圖像與圖形並排對齊？

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

這並不回答你的問題，但是......不這樣做。只有

一個元件可以被嵌套在一個

你可以有很多圖片，但每個人物應該有一個標題。

無論是使用單一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 2

你不應該圖中使用一個以上的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 (e.g., <img> or <code>). 看到http://html5doctor.com/the-figure-figcaption-elements/

但如果你堅持使用多圖無花果，你可以通過使用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 3

你可以做以下...

不包括比在圖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對齊它。見Align span next to each other

vertical-align:top; 

可以玩弄這個位置 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption

Answer 4

正如前面已經說過，你不應該/不能使用多個單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 5

希望這可以幫助，至少它對我有用。我曾在一個引導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; 
    }