Aligning HTML List

Question

I have a HTML list that is using background images in oppose to text as links. My container is 200px tall and I want the links to lie inline in the center of the container, if this were text I could use a line-height:200px; to achieve this however it seems a little different when using background images, any body have any idea how to achieve this method.

Here is a jsfiddle to explain what I mean http://jsfiddle.net/M4XN4/1/

Thanks guys

<div id="container">
    <ul class="container">
        <li class="linkedin"><a href="#"></a><li>
        <li class="twitter"><a href="#"></a><li>
        <li class="facebook"><a href="#"></a><li>
    </ul>
</div>

Answer 1

Cleaned a bit up, is this the look you were going for?

Most of your a tag code can stay separate from each .facebook .linkedin class as well

#footer-right ul li a{
display:inline-block;
height:200px;
background-size:14px 14px;
background-repeat:no-repeat;
background-position:center;
line-height:200px;
}

http://jsfiddle.net/Ush4n/13/

Answer 2

You can use display:inline and some margins to vertical align.

margin-top:80px;

Answer 3

In the CSS, changing the ul to position: relative; and positioning it to top: 72px did it.

The value of top was calculated by subtracting 14px (height of the ul) + 14px (the empty space over the ul) from 100px (vertical center of the containing div).

You can see the updated code here: http://jsfiddle.net/M4XN4/2/