Centering text links above three adjacent images

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>