將字體很棒的圖標對齊到中心

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. 您可以使用類text-center添加額外的<div>並在其中移動您的圖標（我的示例中的第二行）。

 <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

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

將字體真棒圖標放入單獨的div並應用“text-center”類。 它將字體 - 令人敬畏的圖標對齊到中心。

Answer 5

使用這種最簡單的方法：

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