26

合計で 9 つの画像があり、各行に 3 つの画像があります。画像の 1 つにキャプションを追加できましたが、他の画像にはキャプションを追加できませんでした。

<figure>
<center>
<img src='images/album1.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>
</figure><center>

等々。

4

5 に答える 5

54

私はこのようにコードを設定します：

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

次の 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;
}

それぞれfigureがインライン ブロックであるため、基本的に行ごとにユニットを 3 回繰り返すことができます。3 回ごとに を追加するか<br>、ブロック要素で 3 つをラップするか、CSS3nth-of-type(3n)セレクターを使用して改行などを追加します。

text-align: centeronを使用しfigcaptionて、テストを中央に揃えます。

デモを参照してください: http://jsfiddle.net/audetwebdesign/4njG8/

結果は次のようになります (十分な幅の画面の場合)。

ここに画像の説明を入力

于 2013-10-02T14:13:16.280 に答える
1

各フィギュアには、1 つの画像と 1 つのフィグキャプションのみを含める必要があります。

<figure>
    <img>
   <figcaption>
   </figcaption>
</figure>

ところで...「中心」要素はもう存在しません。

コードペンの例

于 2013-10-02T14:05:39.697 に答える