對齊字體真棒圖標居中

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

這是我的代碼。我打算將字體真棒圖標居中放在各自的列中，但我無法做到。

來源

2017-02-18 Solias

您可以將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

來源

2017-02-18 13:21:04

-1

我認爲這將工作：

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

來源

2017-02-18 13:14:05 bijal

謝謝你，這個工作完美:) – Solias

@Solias你不應該使用內聯樣式CSS，看[這個問題]（http://stackoverflow.com/questions/3142710/inline-sty les-vs-classes）的解釋。改爲使用'text-center'類，參見[我的答案]（http://stackoverflow.com/a/42315688/2570353）。 –

啊，我會再次看看這個。我很急，正在尋找一個快速解決方案;將現在整合文本中心課程，看看它如何擺脫。 – Solias

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

HTML

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

這帶來的中間爲u想要的方式。

來源

2017-02-18 13:14:15 Venky

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

把字體真棒圖標到一個單獨的股利和應用「文本中心」類。它會將字體真棒圖標對齊。

來源

2017-02-18 13:15:47

使用此簡單的方法：

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

來源

2017-02-19 04:54:15 Piyali

對齊字體真棒圖標居中

回答

相關問題