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

这是我的密码。我打算在他们各自的栏中把字体的图标居中,但是我做不到。

最佳答案

您可以将text-center移到列<div>,然后此<div>中的所有文本都将居中(在我的示例中是第一行)。
您可以使用class<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

10-05 20:44
查看更多