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 change the css properties of a google visualization table and it columns?

    How to animate a rotated DOM element with CSS

    How do I center text next to a floating image using css?

    How to solve buggy line-height on input fields?

    how do I customize header color in jquery mobile?

    How to make Superfish menu vertical in first level but horizontal in second level?

    How to render a hierarchy tree in HTML5/CSS?

    How to change color of the selected item from a Xul listbox?

    How can I fill the remaining space when dealing with an inline ul?

    How can I prevent my li's from going below my menu even if there is no room?

    How to apply CSS to a textbox?

    How to write a responsive semantic HTML5 page ? (With a framework ?)

    Can't make any different fonts show up on website with @font-face or google fonts

    How to escape quotes in Less variable which stores a color name?

    How to play specific keyframes with css animation

    How do I get an html/css form to post to Gravity Forms?

    How to get the Tololtip Tail for Menu

    How to draw a CSS petagon with all borders radius?

    How can I allow resizable() to increase size beyond initial size?

    jqueryui menu's submenu — how to keep in front

    Show/Hide function between JS, CSS, and HTML

    How to use jquery .css in a javascript variable

    How can I add an external stylesheet to a UIWebView in Xcode?

    colspan doesn't accept decimal numbers. How do I specify the span?

    How to style a completely different element when hovering over another element(with different parents)? [duplicate]

    How to display source code with indent in a web page? HTML? CSS?

    How to add a “new line” after a ZF2 form element?

    How to override CSS :hover?

    How to assign CSS to images which have specific extension, height and width?

    How to Create hidden CSS?