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


Tags: html,css,html-lists,footer

Problem :

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: enter image description here

However, I have a footer like this: enter image description here

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;
}


Solution :

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.


    CSS Howto..

    How can I archive this responsive design?

    How can I use javascript, or css to make my text somewhat transparent?

    How to make a horizontal scroll when minifying window?

    How to display a division over other element

    how to update a css class dynamically onclick a dropdown jquery

    How to assign speed parameter to callback functions

    How to add lines to
  • elemtents
  • sidebar is under the openlayers map how to set css

    How to scroll draw each SVG path one at a time (chronologically)?

    How to Fix: iOS drops CSS files when javascript changes DOM

    How to generate CSS using Garden with ClojureScript (lein-garden)

    How to display half of a character(html entity) using css (and if required jquery)

    How can I get my hyperlink in HTML result in same page or window with or without using iframe tag or JavaScript?

    How to have a background image properly fade in with CSS

    How to make a full page header?

    How to align this CSS menu to the right of its containing div?

    Howto stretch jsf panelgrid in horizontal direction

    How can I make a border wrap around a group of pictures?

    How to select by CSS styles in jQuery?

    How to hide a