中间对齐css圈内的图标字体

Question

我试图将图标放在圆圈内.我正在使用font-awesome的图标字体.我的代码如下

<ul>
    <li><a href="#"><i class="icon-5x icon-camera"></i></a></li>
    <li><a href="#"><i class="icon-5x icon-camera"></i></a></li>
    <li><a href="#"><i class="icon-5x icon-camera"></i></a></li>
</ul> 

CSS

ul {
  list-style: none;
}
ul li {
  display: inline-block;
  margin: 15px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
ul li a {
  font-size: 1em;
  color: #000;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
}

而且我也试过了

a {
 line-height: 100%;
 text-align: center;
}

但这些方法不起作用.

Answer 1

您的解决方案有效,您只需将宽度和高度声明移动到a:

ul {
  list-style: none;

  li {
    display: inline-block;
    background-color: pink;
    margin: 15px;
    border-radius: 50%;

    a {
      color: #000;
      display: table-cell;
      vertical-align: middle; 
      text-align: center; 

      height: 100px;
      width: 100px;   

      &, &:hover, &:active {
        text-decoration: none;
      }
    }
  }
}

结果:

演示:http://sassbin.com/gist/5804312/