需要帮助在我的 Bootstrap 列中将 Font Awesome 图标居中答案

【问题标题】：need help to center Font Awesome icon in my Bootstrap columns需要帮助在我的 Bootstrap 列中将 Font Awesome 图标居中
【发布时间】：2017-08-29 11:17:15
【问题描述】：

这是我的代码，我需要使用内联 css 将图标居中：

<div class="small-4 medium-4 large-4 columns">
    <i class="fa fa-check-square-o fa-lg"></i>
</div>

【问题讨论】：

文本居中父 div

标签： html css icons center

【解决方案1】：

如果你使用bootstrap，你应该只添加text-center类

<div class="small-4 medium-4 large-4 columns text-center">
    <i class="fa fa-check-square-o fa-lg"></i>
</div>

否则，您可以将此内联 css 添加到您的父级 div

text-align: center

原来如此：

<div style="text-align: center" class="small-4 medium-4 large-4 columns">
    <i  class="fa fa-check-square-o fa-lg"></i>
</div>

【讨论】：

非常感谢你^^
@Tate 如果我的回答有用，可以按✔
看起来很棒的字体图标被视为文本。但是，这只解决了水平对齐问题。对于如果行高与父框高度不同时有时不起作用的垂直对齐，这两个很有帮助，stackoverflow.com/questions/17309928/…，stackoverflow.com/questions/19124255/…

【解决方案2】：

添加如下样式，

 .columns {
  text-align: center;
   }

【讨论】：

【解决方案3】：

为图标的容器 div 指定宽度，并为该 div 指定 text-align:center

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
   <div style="width:100%;text-align:center" class="small-4 medium-4 large-4 columns">
          <i class="fa fa-check-square-o fa-lg"></i>
        </div><body>
  
  </body>
  </html>

您还可以将text-center 类添加到容器 div

【讨论】：