Question

我有一个HTML列表，使用背景图像反对文本作为链接。我的容器是200px高，我希望链接内嵌在容器的中心，如果这是文本我可以使用行高：200px;为了达到这个目的，当使用背景图像时似乎有点不同，任何人都知道如何实现这种方法。

这是一个解释我的意思的{jsfiddle http://jsfiddle.net/M4XN4/1/

谢谢你们

<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

清理了一下，这是你想要的样子吗？

你的大多数标签代码都可以与每个.facebook .linkedin类保持分开

#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

您可以使用display:inline和一些边距进行垂直对齐。

margin-top:80px;

Answer 3

在CSS中，将ul更改为position: relative;并将其定位到top: 72px就可以了。

top的值是通过从100px（包含div的垂直中心）减去14px（ul的高度）+ 14px（ul上的空白空间）来计算的。

您可以在此处查看更新的代码：http://jsfiddle.net/M4XN4/2/

对齐HTML列表

3 个答案: