如何将fontawesome图标居中？

Question

我想把我的fontawesome图标放在中间。他们在一个容器里。我正在使用Bootstrap和引导程序的网格系统。 我已经用text-align：center;来试过了，但它不起作用。

这是我的HTML代码：

<div class="row">
  <div class="col-md-1"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
  <div class="col-md-1"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
  <div class="col-md-1"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>


</div>

而且，这是我的CSS代码：

.icon {
  text-align: center;
  display:inline-block;
}

Answer 1

您是否尝试添加此内容： “

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

`

还有一些左右边距将它们分开。

Answer 2

您需要将“text-center”类应用于“row”类，如下所示：

<div class="row text-center">
     <div class="col-md-4"><i class="icon fa fa-5x fa-map-marker" aria-hidden="true"></i></div>
     <div class="col-md-4"><i class="icon fa fa-5x fa-map-marker" aria-hidden="true"></i></div>
     <div class="col-md-4"><i class="icon fa fa-5x fa-map-marker" aria-hidden="true"></i></div>
</div>

然后你不需要“中心阻止”类。另外，如果它连续只有3列，你可以将它分成相等的宽度，而不是“col-md-4”而不是“col-md-1”

这应该有所帮助。

Answer 3

你可以试试这个：

<div class="row">
  <div class="col-md-1">
       <div class="align-center"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
  </div>
  <div class="col-md-1">
      <div class="align-center"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
  </div>
 <div class="col-md-1">
      <div class="align-center"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div>
 </div>

.align-center有这个属性：

.align-center
{
    text-align: center;
}

Answer 4

现在它运作正常。您可以尝试以下代码：

.icon-container{
	margin: 0 auto;
	display: table;
}

<div class="row">
	<div class="icon-container">
		<i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i>
		<i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i>
		<i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i>
	</div>
</div>