Question

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <i class="fa fa-book fa-3x text-center" aria-hidden="true"></i>         
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
            <div class="col-md-4">
                <i class="fa fa-book fa-3x" aria-hidden="true"></i>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
            <div class="col-md-4">
                <i class="fa fa-book fa-3x" aria-hidden="true"></i>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
        </div><!--end row-->
    </div><!--end container-->
</section>

这是我的代码。我打算将字体真棒图标集中在各自列的中心，但我无法做到。

Answer 1

您可以将text-center移至列<div>，然后此<div>中的所有文字都会居中（我的示例中的第一行）。
您可以在课程<div>中添加额外的text-center，并在其中移动您的图标（我的示例中的第二行）。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-4 text-center">
                <i class="fa fa-book fa-3x" aria-hidden="true"></i>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
            <div class="col-md-4">
                <div class="text-center">
                    <i class="fa fa-book fa-3x" aria-hidden="true"></i>
                </div>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
            </div>
        </div><!--end row-->
    </div><!--end container-->
</section>

JSFiddle

Answer 2

我认为这会奏效：

<div class="col-md-4" style="text-align:center;">
      <i class="fa fa-book fa-3x text-center" aria-hidden="true"></i>         
      <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
</div>

Answer 3

.center{
text-align:center;
width:50%;
}

HTML

<div class="center"><i class="fa fa-book fa-3x text-center" aria-hidden="true"></i></div>

这就像你想要的那样把它带到中间。

Answer 4

＆＃13;

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <section>
       <div class="container">
          <div class="row">
             <div class="col-md-4">
                <div class="text-center"><i class="fa fa-book fa-3x" aria-hidden="true"></i></div>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
             </div>
             <div class="col-md-4">
                <div class="text-center"><i class="fa fa-book fa-3x" aria-hidden="true"></i></div>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
             </div>
             <div class="col-md-4">
                <div class="text-center"><i class="fa fa-book fa-3x" aria-hidden="true"></i></div>
                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>
             </div>
          </div><!--end row-->
       </div><!--end container-->
    </section>

＆＃13;

将字体真棒图标放入单独的div并应用＆＃34; text-center＆＃34;类。它会将字体很棒的图标对齐到中心。

Answer 5

使用这种最简单的方法：

<div class="text-center"><i class="fa fa-book fa-3x text-center" aria-hidden="true"></i></div>

将字体很棒的图标对齐到中心

5 个答案: