Centering text links above three adjacent images - html

Question

I have created a div containing three text links and I am placing them above three equal sized adjacent images. I need each piece of text to be centered above it's corresponding image.
Here is my div:
#catalogs ul {
text-align: justify;
}
#catalogs ul:after {
content: '';
display: inline-block;
width: 100%;
}
#catalogs ul:before {
content: '';
display: block;
margin-top: -0.75em;
}
#catalogs li {
display: inline-block;
margin-right: 1.75em;
position: relative;
top: 1.25em;
font-size: 100%;
}
<div id="catalogs">
<ul>
<li><span style="text-decoration: underline; color: #0b5394;"><a
href="http://www.kerussosales.com/kerusso-spring-2017" target="_blank"
rel="noopener noreferrer">Spring 2017</a></span></li>
<li><span style="text-decoration: underline; color: #0b5394;"><a
href="http://www.kerussosales.com/kerusso-summer-2017-catalog"
target="_blank" rel="noopener noreferrer">Summer 2017</a></span></li>
<li><strong>Fall 2017 - available August 1st</strong></li>
</ul>
</div>
Here is what the page currently looks like using the above code:
page image
Can anyone help me modify the above css so that each text link is perfectly centered above its respective image?

Answer 1

I would wrap each image and text in a separate DIV box - and then just use text-align: center to center the text. That should work!
I dunno if I would use list items for those though. Maybe a heading tag like h3 or a paragraph tag. Check out my pen below to see what I mean =D (I added inline style to my example here to add clarification I hope. I prefer my codepen example though, it's cleaner)
https://codepen.io/celtninja/pen/RgBzOZ
<div id="one" style="float: left; margin: 5px;">
<p style="text-align: center;">Image Heading</p>
<img style="text-align: center;"
src="https://placeholdit.co//i/350x350?">
</div>