Question

美好的一天，我使用Font-awesome和bootstrap 4.请先检查我的脚本

<div class="container">
      <div class="row">

          <div class="col">
            <div class="row"> 
              <span class="fa fa-building fa-5x text-center"> </span>
            </div>
            <div class="row">
              <h3 class="text-center">Company Profile</h3>
            </div>
            </div>

          <div class="col">   
            <div class="row"> 
              <span class="fa fa-shopping-cart fa-5x text-center"> </span>
            </div>
            <div class="row">
              <h3 class="text-center">Shopping Cart</h3>
            </div>
           </div>

         <div class="col">   
            <div class="row"> 
              <span class="fa fa-industry fa-5x text-center"> </span>
            </div>
            <div class="row">
              <h3 class="text-center">Inventory Control</h3>
            </div>
           </div>


        <div class="col">   
            <div class="row"> 
              <span class="fa fa-users fa-5x text-center"> </span>
            </div>
            <div class="row">
              <h3 class="text-center">User Management</h3>
            </div>
        </div>
      </div>
  </div>

我上面的脚本我得到了这个

如您所见，fa图标不在文本的中心。如何在中心制作fa-icon？

Answer 1

将文本中心类添加到图标周围的div而不是图标范围，如下所示：

        <div class="row text-center"> 
          <span class="fa fa-users fa-5x"> </span>
        </div>

Answer 2

只需添加＆＃34;文本中心＆＃34;上课到＃34; fa＆＃34;元素容器：

从：

<div class="row"> 
  <span class="fa fa-building fa-5x text-center"> </span>

为：

<div class="row text-center"> 
  <span class="fa fa-building fa-5x text-center"> </span>

Answer 3

您可以将HTML标记简化为以下内容，图标下的文字将根据分配给父text-center div的课程col居中对齐。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
	<div class="row">
		<div class="col-md-3 text-center">
			<span class="fa fa-building fa-5x"> </span>
			<h3>Company Profile</h3>
		</div>

		<div class="col-md-3 text-center">
			<span class="fa fa-shopping-cart fa-5x"> </span>
			<h3>Shopping Cart</h3>
		</div>

		<div class="col-md-3 text-center">
			<span class="fa fa-industry fa-5x"> </span>
			<h3>Inventory Control</h3>
		</div>

		<div class="col-md-3 text-center">
			<span class="fa fa-users fa-5x"> </span>
			<h3>User Management</h3>
		</div>
	</div>
</div>

Answer 4

只需添加一个自定义类，即可使这些图标居中对齐。
您可以查看 fiddle.

.icon-center{
  margin:0 auto;
}

将文本居中置于字体真棒图标下方

4 个答案: