web-dev-qa-db-ja.com

キャプションを画像の下に配置する方法

私は合計で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>

等々。

htmlcsslayoutcaption
13
Brian Lam

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

_<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をラップするか、 CSS3 nth-of-type(3n)セレクターは、改行などを追加します。

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

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

結果は次のようになります（十分に広い画面の場合）：

enter image description here

32
Marc Audet

これは私のために動作します。

figure {
  display: inline-block;
  text-align: center;
  border: 1px dotted gray;
  margin: 5px; /* adjust as needed */
}
figure img {
  vertical-align: top;
}
figure figcaption {
  border: 1px dotted blue;
}

text-align：center;唯一必要なものです。

2
anatak

各図には、1つの画像と1つのfigcaptionのみを含める必要があります。

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

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

Codepenの例

1
Paulie_D