Trying to get 3 images side-by-side with links underneath in HTML/CSS

Question

This is a snippet of my current HTML code:

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>

Everything I've tried with CSS and HTML like making divs around each individual image has thrown the whole thing out of whack... I have looked at stack overflow's guides on how to do this but once again it just mucks everything up.

tl;dr: with the current code I have, the images are in a perfect line, however, due to their perfect line, I cannot place links centered under the pictures.

Answer 1

Wrapping images + text/links with divs was a good starting point. Maybe you just forgot to move the css formatting from the images to the wrapping divs.

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>