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

我试图在一个圆圈内的图标中间对齐。我使用的字体图标的字体真棒。我的代码如下

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

我也试过了

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

---

但是这些方法不起作用。

在“li”中添加此填充

li{
padding:10px; //or anyvalue
}

或者使用特定的填充

li{
padding-top:10px; //or any value
}

---

请记住，当您添加填充值时，大小也会增加、调整和平衡。

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

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

结果:

---

使用flexbox，您可以非常轻松地完成此操作。对于不支持flexbox的浏览器，这就是我的解决方案，然后回退到上面的解决方案。Flexbox的支持现在非常棒，尤其是随着IE 8 9和10的消失

诀窍是使用“对齐内容：中心”对齐圆圈中的图标中心，并使用“对齐项目：中心”垂直对齐圆圈中的图标

看看这个很棒的。请参见此处以获取示例笔

HTML：

<ul class="social_links">
 <li><a href="" target="_blank">
   <i class="fa fa-envelope"></i>
 </a></li>
 <li><a href="" target="_blank">
   <i class="fa fa-twitter"></i>
 </a></li>
 <li><a href="" target="_blank">
   <i class="fa fa-facebook"></i>
 </a></li>
</ul>

列表示例：

        <ul class="list-unstyled list-coordonne">
            <li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
            <li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
            <li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
        </ul>

---

使用线高度属性，这是最好的，我有相同的问题，我使用线高度，它的完成。 范例

---

很好

您也可以使用padding-bottom、padding-right或padding-left。问题是，尽管li元素足够大，但其内部的表格单元格没有指定宽度，因此仍然很小（根据内容调整了其宽度）。只需ping一下，让作者知道链接现在可以作为广告使用

ul.social_links {
    display: block;
    padding: 20px 0px 0px;

    li {
        display: inline-block;
        font-size: 23px;
        padding: 0px 10px;

    }
}

ul.social_links i {
  background: black;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all .5s ease-in-out;

  &:hover{
    background: #555555;
  }
}

        <ul class="list-unstyled list-coordonne">
            <li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
            <li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
            <li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
        </ul>

      .footer-text .fa-coordonne {
          color: white;
          background-color: #dad918;
          border-radius: 50%;
          font-size: 25px;
          width: 40px;
          height: 40px;
          text-align: center;
      }

      .footer-text .list-coordonne>li:first-child .fa-coordonne:before{
        content: '\f041';
        text-align: center;
          font-weight: 600;
          vertical-align: sub;
          z-index: 12;
      }

      .footer-text .list-coordonne>li:nth-child(2) .fa-coordonne:before{
        content: '\f003';
       text-align: center;
          font-weight: 600;
          vertical-align: sub;
          z-index: 12;
      }

      .footer-text .list-coordonne>li:last-child .fa-coordonne:before{
        content: '\f095';
      text-align: center;
          font-weight: 600;
          vertical-align: -webkit-baseline-middle;
          z-index: 12;
      }

   height:20px;
   width:20px;
   line-height:20px;