<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