中心图标和文本垂直和水平

Question

我有一个链接块：

    <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;
}

Answer 1

制作<A> position: absolute; top:0; left: 0;。并使图标和链接中心与您对齐。这将有效。

Answer 2

这是完全可能的。移除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 */
}

Answer 3

您可以使用display: table-cell;属性垂直居中对齐＆amp;为全宽（对齐）菜单项设置width: 1%。

.nav {
  list-style: none;
  padding-left: 0;
}
.nav > li {
  display: table-cell;
  vertical-align: middle;
  width: 1%;
}
.nav > li > a {
  display: block;
  padding: 10px;
  text-align: center;
}

示例：http://codepen.io/neilhem/pen/ramzXG

警告：此方法在Safari 8.0中存在错误