Trying to Get Three Divs to Align Properly With Another Three Below

Question

I'm trying to get three divs within the same line to act as titles to three images below them that are centered to the text. I can get right and left to work, but the center one just won't work no matter what I try.

I've tried a lot of different things like messing with margin and padding values, changing the arrangement of containers, and moving the images to separate divs. This is the closest I've gotten:

body {
  background-color: #FFFDD0;
}
header {
  text-align: center;
}
img {
  border: 2px black groove;
  width: 200px;
  height: 150px;
  padding: 0px;
  display: block;
}
a {
  text-decoration: none;
  color: black;
}
div {
  text-align: center;
  display: absolute;
  margin: 0px;
  padding: 0px;
}
h3 {
  clear: none;
  display: inline;
}

    <header>
        <h1>Brent Tracker Version Log</h1>
    </header>
    <article style="text-align: center;">
        <div style="float: left"><h3>Version 1</h3>
            <a href=""> <img src="https://picsum.photos/200/300?grayscale"></a>
        </div>
        <div style="margin: auto;">
            <h3>Version 2</h3>
            <a href=""> <img src="https://picsum.photos/seed/picsum/200/300"></a>
        </div>
    </article>

I know there is probably a really simple solution I'm missing. I'm fairly new to coding.