Der Versuch, mit Links in HTML unter 3 Bilder Seite an Seite zu bekommen/CSS

Question

Dies ist ein Ausschnitt aus meinem aktuellen HTML-Code ist:

div.Navbar { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
} 
 
.icons { 
 
    height: 300px; 
 
}

<div class="NavBar"> 
 
    <img src="images/ThumbNails/Conflict.jpg" class="icons" style="float: left; width: 30%; margiwn-right: 1%; margin-bottom: 0.5em;" /> 
 
    <img src="images/ThumbNails/internationalN.jpg" class="icons" style="float: center; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" /> 
 
    <img src="images/ThumbNails/Politics.jpg" class="icons" style="float: right; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" /> 
 
</div>

Alles, was ich mit CSS habe versucht, und HTML, wie Divs um jedes einzelne Bild zu machen, hat die ganze Sache aus dem Gleichgewicht geworfen ... Ich habe die Stack-Overflow-Guides angeschaut, wie man das macht, aber noch einmal muckt es alles auf.

tl; dr: Mit dem aktuellen Code, den ich habe, sind die Bilder in einer perfekten Linie, aber aufgrund ihrer perfekten Linie kann ich keine Links unter den Bildern zentriert platzieren.

Answer 1

Wrapping Bilder + Text/Links mit divs war ein guter Ausgangspunkt. Vielleicht hast du einfach vergessen, die css-Formatierung von den Bildern zu den Wrapping-divs zu verschieben.

div.Navbar { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
} 
 
.icons { 
 
    height: 300px; 
 
    width: 100%; 
 
} 
 
.img_container { 
 
    float: left; 
 
    width: 30%; 
 
    margin-right: 1%; 
 
    margin-bottom: 0.5em; 
 
    text-align: center; 
 
}

<div class="NavBar"> 
 
    <div class="img_container"> 
 
    <img src="https://placehold.it/350x300" class="icons"> 
 
    <a href="#">link</a> 
 
    </div> 
 
    <div class="img_container"> 
 
    <img src="https://placehold.it/350x300" class="icons"> 
 
    <a href="#">link</a> 
 
    </div> 
 
    <div class="img_container"> 
 
    <img src="https://placehold.it/350x300" class="icons"> 
 
    <a href="#">link</a> 
 
    </div> 
 
</div>

Answer 2

würde ich Flexbox hierfür vorschlagen:

(geändert Symbole width & height nur so können sie Snippet inline passen)

div.NavBar { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
} 
 
.NavBar div { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.icons { 
 
    width: 150px; 
 
    height: 150px; 
 
}

<div class="NavBar"> 
 
    <div> 
 
    <img src="http://placehold.it/100x100" class="icons" /><a href=""> test link</a> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/100x100" class="icons" /><a href=""> test link</a> 
 
    </div> 
 
    <div> 
 
    <img src="http://placehold.it/100x100" class="icons" /><a href=""> test link</a> 
 
    </div> 
 
</div>