8

我正在尝试将图标中间对齐一个圆圈。我正在使用 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;
}

但这些方法都行不通。

4

5 回答 5

10

您的解决方案是有效的，您只需将宽度和高度声明移动到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;
      }
    }
  }
}

结果：

截屏

于 2013-06-18T10:37:34.037 回答
3

你可以很容易地用 flexbox 做到这一点。对于不支持 flexbox 的浏览器，这是我的选择，然后回退到上述解决方案。如今，Flexbox 支持非常棒，尤其是在 IE 8 9 和 10 消失的情况下。

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

在 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;
  }
}
于 2016-01-28T01:09:24.097 回答
2

使用 line-height 属性，这是最好的，我有同样的问题，我使用 line-height 并完成了。例子

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

好走

于 2020-07-15T04:23:14.977 回答
1

列表示例： 

        <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;
      }
于 2017-12-15T17:21:18.380 回答
-1

在 'li' 中添加此填充

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

或使用特定的填充

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

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

于 2013-06-18T10:08:42.413 回答