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

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

1. 您可以移动text-center到您的列<div>,然后将其中的所有文本<div>居中(我的示例中的第一行).
2. 您可以添加额外<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