html - 垂直和水平将图标和文本居中

我有一个链接块：

    <ul>
        <li><a href="#" class="icon26 icon1">Link 1</a></li>
        <li><a class="icon26 icon2">Link 2</a></li>
    </ul>

每个链接都有一个随附的图标。我想要实现的是两件事：
1）将图像和文本居中放置在LI标签内
2）阻止A标签以使其填充LI标签

这是我想做的事情：



我可以达到1或2，但不能同时达到–有什么想法吗？

目前，我正在为链接使用现有的Sprite解决方案-这可能并不理想，但是如果找到解决方案，则可以更改它。这是CSS：

.icon26:before
{
    background:url(/assets/images/sprite26.png) no-repeat 0 0;
    content:"";
    display:block;
    float:left;
    height:2.6rem;
    width:2.6rem;
}

.icon1:before
{
    background-position:-32px -2px;
}

这是UL结构的其余CSS：

#nav ul
{
    width:100%;
}

#nav ul li
{
    float:left;
    width:33.33%;
}

#nav a
{
    display:block;
    line-height:4.6rem;
}

#nav a:before
{
    margin:1rem 0.5rem 1rem 0;
}

最佳答案

完全有可能。删除float，并改为使用display: inline-block和vertical-align: middle的组合。

Here's the fiddle。

以下是相关代码：

.icon26:before {
    background: url(/assets/images/sprite26.png) no-repeat 0 0;
    content: "";
    display: inline-block; /* <-- instead of float: left */
    vertical-align: middle; /* <-- add to vertically center inline blocks */
    height: 2.6rem;
    width: 2.6rem;
}

#nav ul li {
    float: left;
    width: 33.33%;
    text-align: center; /* <-- add this to horizontally center inline items */
}

关于html - 垂直和水平将图标和文本居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28041662/