CSS圈子内的中间对齐图标字体 [英] middle aligning icon-fonts inside css circles

问题描述

我正在尝试将图标中间对齐到一个圆圈内.我正在使用超棒的图标字体.我的代码如下

I am trying to middle align icons inside a circle. I am using icon fonts by font-awesome. My code is as follows

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

但是这些方法不起作用.

But these approaches does not work.

推荐答案

您的解决方案有效，您只需要将width和height声明移到 a 中:

Your solution is valid, you just need to move the width and height declarations into the 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;
      }
    }
  }
}

结果:

这篇关于CSS圈子内的中间对齐图标字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！