キャプションを画像に揃える方法は？

Question

キャプションを画像にどのように揃えることができるかについて質問したいと思います。本当に長いテキストがあります。出来ますか？

<figure> 
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=330%C3%97180&w=330&h=180"> 
<figcaption>Adjusting to school is a noteworthy move in a youthful grown-up's life. For some, the move incorporates moving out of the family home surprisingly, making new companions, and confronting expanded academic demands. 
</figcaption> 
</figure> 

CSS

figure { 
display: inline-block; 
margin: 20px; 
} 

figure img { 
vertical-align: top; 
} 

figure figcaption { 
text-align: center; 
} 

上記のコードは、これに得られました。

I COULDN'T UPLOAD IT BECAUSE IT SAYS I NEED 10 REPS TO POST IMAGES, I'M VERY VERY SORRY

Answer 1

だけで画像の幅を持つdiv要素を構成しています。その後、イメージを背景イメージとして使用し、divの中央にコンテンツを配置します。

以下の例：

.div{ 
display: flex; 
height: 200px; 
width: 100%; 
background-image: url("paper.gif"); 
} 

.caption{ 
margin: auto; 
} 

Answer 2

私はあなたがフレックス、背景IMG withou画像の最大幅でテキストを、持っているしたい場合は、text-align:center

figureで

figure { 
    text-align:center 
} 

Answer 3

を置くべきだと思います.. 。ただ1pxのために、その幅を表に数字の表示を変更し、設定

figure { 
    margin: 20px; 
    display: table; 
    width: 1px; 
} 

https://fiddle.jshell.net/b201khsy/

Answer 4

問題が発生する可能性があります。

フィギュア{最大幅：330px;テキスト整列：センター;幅：100％;}

Answer 5

あなたはどのような幅を知らなくても、画像の幅に数字の幅を調整したいと仮定すると、ピクセルではデザイン時ですが、値にはmin-contentを使用できます。
これにより、コンテナの幅がコンテンツの幅に制限されます。この場合は、画像、またはテキスト中の最も長い単語のいずれかです。 MDNを参照してください。

figure { 
 
    display: inline-block; 
 
    margin: 20px; 
 
    width: -webkit-min-content; 
 
    width: -moz-min-content; 
 
    width: min-content; 
 
} 
 

 
figure img { 
 
    vertical-align: top; 
 
} 
 

 
figure figcaption { 
 
    text-align: center; 
 
}

<figure> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=330%C3%97180&w=330&h=180"> 
 
    <figcaption>Adjusting to school is a noteworthy move in a youthful grown-up's life. For some, the move incorporates moving out of the family home surprisingly, making new companions, and confronting expanded academic demands. 
 
    </figcaption> 
 
</figure>

免責事項：あなたは、ベンダープレフィックスで見ることができるように、これはあるいはすべてのブラウザでサポートされていない場合があり、実験技術、です。 （読んでください：IEやEdgeではなく、FirefoxとChromeだけです。）注意して使用してください。