Question

我在这里做了一些研究，并尽我所能，但是那些图标不希望居中。别用这些伤害自己，保证金似乎不起作用。

    [class^="icon-"], [class*=" icon-"] {
        display: inline-block;
        width: 100%;
    }
    td a {
      text-align:center;
    }
    .fa-phone {
        color: #86b545;
    }
    .fa-map-signs{
        color: #86b545;
    }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<table>
  <tr>
    <td><a class="fa fa-phone fa-3x" href="tel:+33500000000"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="fa fa-map-signs fa-3x" href="https://www.google.com/maps/place/Acttif+Littoral/@47.2957248,-2.2068371,15z/data=!4m2!3m1!1s0x0:0x358670f7109ad0d7?ved=2ahUKEwjMl8zni8rgAhULAWMBHftSDJIQ_BIwCnoECAYQCA"></a> </td>
    </tr>
</table>

Answer 1

最好不要为此使用表格布局。

<div class="icon-layout">
    <a class="fa fa-phone fa-3x" href="tel:+33500000000"></a>
    <a class="fa fa-map-signs fa-3x" href="https://www.google.com/maps/place/Acttif+Littoral/@47.2957248,-2.2068371,15z/data=!4m2!3m1!1s0x0:0x358670f7109ad0d7?ved=2ahUKEwjMl8zni8rgAhULAWMBHftSDJIQ_BIwCnoECAYQCA"></a>
</div>

CSS

.icon-layout {
  vertical-align: middle;
  // if you want icons centered horizontally
  text-align: center
}
.icon-layout a {
  display: inline-block;
}
.icon-layout a:last-child {
  margin-left: 10px;
}

早点给

Answer 2

重新格式化标记以提高可读性，并向center添加新的类td

<td class="center">
          <a class="fa fa-phone fa-3x" href="tel:+33500000000" />
          <a
            class="fa fa-map-signs fa-3x"
            href="https://www.google.com/maps/place/Acttif+Littoral/@47.2957248,-2.2068371,15z/data=!4m2!3m1!1s0x0:0x358670f7109ad0d7?ved=2ahUKEwjMl8zni8rgAhULAWMBHftSDJIQ_BIwCnoECAYQCA"
          />
        </td>

然后您可以做

.center {
   display: flex;
   justify-content: center;
}

无法将容器中的两个字体超赞图标水平居中

2 个答案: