How to make footer elements (image and label) centered?

Question

Using code from this question, I created a footer by making a list whose elements is another list, which has two elements (an image and a label).

I'm trying to make a footer like this:

However, I have a footer like this:

The footer div is centered, but the elements are not because the width of the li elements of first list is 33%. How do I make the elements of footer centered like the green footer? Also, please use percentages and not pixels for specifying widths/heights because I want to make this website responsive to different resolutions/pixel sizes.

HTML:

<div class = "footer>    
    <ul>
          <li >
            <ul>
              <li> <a href="" target="_blank"><img class = "footerImage" /> </a> </li>
              <li> <a class = "iconTitle" href="" target="_blank"> Resume </a> </li>
            </ul>
          </li>
          <li >
            <ul>
              <li> <a href="" target="_blank"><img class = "footerImage" /> </a> </li>
              <li> <a class = "iconTitle" href="" target="_blank"> GitHub </a> </li>
            </ul>
          </li>
          <li >
            <ul>
              <li> <a href="" target="_blank"><img class = "footerImage" /> </a> </li>
              <li> <a class = "iconTitle" href="" target="_blank"> LinkedIn </a> </li>
            </ul>
          </li>             
    </ul>
</div>

Note: Code for img tag is shortened for simplicity.

CSS:

.footer ul {
    list-style-type: none;
    width: 90%;
    text-align: center;

    /*Removes indentation*/
    margin: 0 auto;
    padding: 0;
}

.footer .iconTitle {
    position: initial; /*Remove posiiton: absolute that's applied to icons in About Me page*/
}

.footerImage {
    width: 100%;
}

.footer ul > li {
   display: inline-block;
   width: 33%;
}

.footer ul > li > ul {
   display: block;
   width: 100%;
}

.footer ul > li > ul > li {
   display: block;
}

Answer 1

You've been given some bad advice. What your example does is as bad (worse, in a way) as using tables for layout. Your image + caption are not lists, so do not belong in list elements. To give you a reason: screenreaders will read: list, x items... then again list, 2 items... and you are duplicating your link element, which is risky and depending on how you handle your images could lead to 'empty link' warnings and definitely duplicate link warnings when checking for accessibility.

Here's an example of how it's done better, also fixing your centering issue:

.footer ul {
    list-style-type: none;
    width: 90%;
    text-align: center;

    /*Removes indentation*/
    margin: 0 auto;
    padding: 0;
    border: solid 1px red;
}

.footer ul > li {
   display: inline-block;
   width: 33%;
   border: solid 1px green;
   box-sizing: border-box; 
}

figure {
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
    border: solid 1px yellow;
}

figure img {
    margin-left: auto;
    margin-right: auto;
    border: solid 1px pink;
}

figcaption {
    display: block;
    margin-left: auto;
    margin-right: auto; 
    border: solid 1px grey;
}

<div class="footer">    
    <ul>
      <li>
        <a href="" target="_blank"><figure><img class = "footerImage" /><figcaption>Resume</figcaption></figure></a> 
      </li>
      <li>
        <a href="" target="_blank"><figure><img class = "footerImage" /><figcaption>Github</figcaption></figure></a>
       </li>    
       <li>
         <a href="" target="_blank"><figure><img class = "footerImage" /><figcaption>Resume</figcaption></figure></a> 
       </li>             
    </ul>
</div>

I added borders for your convenience. (And mine.)

It's late here, but this should work. It centered on my screen.