Grow your CSS skills. Land your dream job.

Vertical align image sprites horizontally in footer

  • # March 30, 2013 at 4:06 am

    I created a class with a ul that aligned images vertically across the footer. Now I’m going with sprites and I’m aware they’re individual, that’s okay with me. One of the sprites is smaller height. How do I get them to align vertically without using the margin-top on the one li on the ‘Western Growers’ logo. Since I prefer to learn the most proper technique, I’d like to use a ul class=”social” instead of wrapping it in a div like it is now.

    [Your text to link here…](http://growersice.com/ “http://growersice.com/”)

    # March 30, 2013 at 4:59 am

    You could make the anchor display: inline-block instead of block and use vertical-align: middle.

    A couple of notes:
    1) you’re using sprites, but to the bare minimum. I would, at the very least, combine the three footer anchor sprites into one. Fewer requests, faster load time

    2) line 70 in font.css is plain ugly. Use the C in CSS! Give just the body that font declaration and everything else will share it. Then override those that differ.

    # March 30, 2013 at 5:26 am

    There are some catches that will cause initial issues when switching over to `display: inline-block;` so I’ll go through all the changes.

    At the moment the `.social` is hard coded to 606px width. Instead of defining such a width you want to use `text-align: center;` which gives you the effect of everything centered (once everything is `inline-block`). Major advantage here is that you can add or remove any item in the footer and it’ll still appear centered. Dynamic stuff.

    Next: `.social ul` is floated. We actually don’t want (or need) that now so remove clear, float, height, width. No need to define things that don’t have any effect :)

    `.social li` also has more than needed. We make it a regular `inline` element. It can be `inline-block` too if wanted, but that doesn’t really give us anything right now and `inline` is shorter to type (best reason ever). So remove: float, height, line-height. Replace `margin-right: 80px;` with `margin: 0 30px;` (total space between images will be roughly 65px this way as there is extra space character in the middle, so you get 30px + space character + 30px). Then also set `display: inline;`

    Remove `style=”margin-top:26px;”` in the HTML.

    `.social li a` currently has `line-height: 104px;` – you can keep this rule here or move it up and give it to `.social` as it’ll be inherited to all child elements. Add `display: inline-block;` and `vertical-align: middle;` and we’re almost done with the changes.

    Finally you have `.social li:last-child` to remove `margin-right` – this style has just become unnecessary as we’ve replaced it with margin that is equally on the both sides of each list element.

    **Edit!**
    Some additional stuff: you can also remove fixed height from `#footer` and use `line-height` in `.social` to control the height of the element, while still vertically centering the list elements to the middle. The elements are no longer floated so you don’t have issues with elements going “out of the flow” :)

    # March 31, 2013 at 12:26 am

    Please elaborate on the font.css issue so I can override that rule set in the child theme’s style sheet.

    Otherwise I implemented all suggestions except for these questions.

    1.) Just to be proper should I use
    ul class=”social”
    instead of how the ul is currently wrapped?

    2.) There’s a lot of display: inline-block. Are any not needed?

    3.) I removed height from #footer and it didn’t hold?

    4.) Do I still need
    .social img { vertical-align:middle; } ?

    # April 2, 2013 at 11:49 am

    Any one there?

    # April 10, 2013 at 4:04 pm

    I put height: auto on the footer because the height was coming from the parent theme’s css. Thanks.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".