在字体真棒图标下方居中文本 [英] centering text below font awesome icon

查看：29
本文介绍了在字体真棒图标下方居中文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好，我正在使用 Font-awesome 和 bootstrap 4.请先检查我的脚本

<div class="row"><div class="col"><div class="row"><span class="fa fa-building fa-5x text-center"></span>
<div class="row"><h3 class="text-center">公司简介</h3>

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

<div class="row"><h3 class="text-center">购物车</h3>

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

<div class="row"><h3 class="text-center">库存控制</h3>

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

<div class="row"><h3 class="text-center">用户管理</h3>

通过我上面的脚本，我得到了这个

如您所见，fa 图标不在文本的中心.如何在中心制作 fa 图标?

解决方案

将 text-center 类添加到图标周围的 div 中，而不是像这样:

<span class="fa fa-users fa-5x"></span>

Good day, I'm using Font-awesome and bootstrap 4. Please check my Script first

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

with my script above i get this

as you can see, the fa icons is not at the center of text. How can i make the fa-icon in center ?

解决方案

Add the text-center class to the div surrounding your icon instead of of the icon span like so:

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

这篇关于在字体真棒图标下方居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆