How do I put Links in between two images html? - html

Question

I'm totally new to html/css so I am litlle confused with one problem. I have an html/css file with a bunch of different links and two images. I need to position them all like this:
This may be an easy task but for a begginer like me it seems too difficult. I've browsed the Internet on how to do it, but apparently nothing from that fits me. Only thing I could do is position one image to the left and the links to the center of that image but that was not what i wanted. Any help is appreciated!
This is the code:
<div class="container-fluid text-center">
<h1>Text</h1>
<div class="flex-box">
<img src="/image.png">
<img src="/image2.png">
<div class="text-center">
<a class="h2" th:href="#{/states}">Link1</a>
</div>
<div class="text-center">
<a class="h2" th:href="#{/capitals}">Link2</a>
</div>
<div class="text-center">
<a class="h2" th:href="#{/events}">Link3</a>
</div>
<div class="text-center">
<a class="h2" th:href="#{/wars}">Link4</a>
</div>
<div class="text-center">
<a class="h2" th:href="#{/figures}">Link5</a>
</div>
<div class="text-center">
<a class="h2" th:href="#{/governors}">Link6</a>
</div>
<div class="text-center">
<a class="h2" th:href="#{/statistics}">Link7</a>
</div>
</div>
</div>

Answer 1

You can always use display: flex. Here's an example:
#container {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-around;
}
#text-container a {
display: block;
}
<div id="container">
<img src="https://via.placeholder.com/150" />
<div id="text-container">
Link 1
Link 2
Link 3
</div>
<img src="https://via.placeholder.com/150" />
</div>