キャプションと説明付きで3つの画像を中央に配置するにはどうすればよいですか？ HTML

Question

私はHTMLを初めて使用しており、3つの中央の画像（横並びに表示されます）を持つWebページを作成しようとしています。ここで私が持っているコードは次のとおりです。

<center> 
 
<figure style="display:inline-block;text-align:center;top:350px"> 
 
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block"> 
 
    <img src="images/website-main1.jpg" style="margin-bottom:10px" width="275px" height="175px" /> 
 
    <figcaption style="text-align:center">This is an example of a super long caption that will make the images offset</figcaption> 
 
    <div style="text-align:left"> 
 
    <p>description example</p> 
 
    </div> 
 
    </div> 
 
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block"> 
 
    <img src="images/website-main6_1.jpg" style="margin-bottom:10px" width="275px" height="175px" /> 
 
    <figcaption style="text-align:center">First image</figcaption> 
 
    <div style="text-align:left"> 
 
    <p>description</p> 
 
    </div> 
 
    </div> 
 
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block;"> 
 
    <img src="images/a1_orig.jpg" style="margin-bottom:10px" width="275px" height="175px" /> 
 
    <figcaption style="text-align:center">First image</figcaption> 
 
    <p>description</p> 
 
    </div> 
 
</figure> 
 
</center>

このコードでは、イメージを作成し、それらを中心に、しかし、キャプションや説明がまったく同じでない場合、画像は（EXをオフセットします：場合一番左の画像のキャプションは非常に暗く、その画像は他の2つの画像よりも高く表示されます）。とにかくこれを修正するには？

Answer 1

CSSを使用してみてください！ HTMLを維持するのはずっと簡単です。

また、Flexboxの使用を検討する必要があります。

私はあなたのためのデモを行った。

.container { 
    display:flex; 
    width:90%; 
    margin:0 auto; 
} 

用途：display:flexフレキシボックスを有効にするhttps://jsfiddle.net/djzyvtvh/1/

はそうのようなあなたの写真とキャプションのすべての周りのDIVを追加します。

そして各々がflex:1プロパティボックス与えるので、各項目は同じである：期待どおりに動作している

.box { 
    flex:1; 
    margin:0 4px; 
}