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

结果：

screenshot

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

Answer 2

您可以非常轻松地使用flexbox执行此操作。对于不支持flexbox的浏览器，这是我的回归，然后回到上面的解决方案。如今，Flexbox支持非常棒，尤其适用于IE 8 9＆amp; 10走了。

诀窍是使用justify-content：center来对齐圆圈中的图标中心，并使用align-items：center来垂直对齐圆圈中的图标。

看看这个伟大的resource on flexbox。请参阅此处以获取示例笔http://codepen.io/celsowhite/pen/pgVegE。

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>

SCSS：

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

Answer 3

使用line-height属性，这是最好的，我遇到了与使用line-height相同的问题，并且已经完成。例子

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

好去

Answer 4

列表示例：

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

CSS代码以圆圈为中心图标：

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

Answer 5

在'li'

中添加此填充

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

或使用特定填充

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

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

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

5 个答案: