user3380148 user3380148 - 6 months ago 10
CSS Question

Aligning HTML List

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

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/