Wie zentrieren Sie drei Bilder mit Bildunterschriften und Beschreibungen? HTML

Question

Ich bin neu in HTML und versuche, eine Webseite mit drei zentrierten Bildern (nebeneinander angezeigt) zu erstellen. Hier ist der Code, ich habe:

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

Dieser Code erstellt die Bilder und zentriert sie, aber wenn die Beschriftungen oder Beschreibungen sind nicht genau das gleiche, werden die Bilder Offset (EX: Wenn die Beschriftung auf dem Bild ganz links ist sehr wortreich, dann wird das Bild höher als die anderen beiden angezeigt). Gibt es trotzdem etwas zu beheben?

Answer 1

Sie sollten versuchen, CSS zu verwenden! Es ist so viel einfacher, Ihren HTML-Code zu pflegen.

Sie sollten auch Flexbox verwenden.

Ich habe eine Demo für Sie gemacht: https://jsfiddle.net/djzyvtvh/1/

ein DIV um alle Ihre Bilder hinzufügen und Bildunterschriften wie so:

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

Verwendung: display:flex zu Flexbox zu ermöglichen.

Dann gibt jede Box eine flex:1 Eigenschaft, so dass jeder Artikel ist gleich:

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