これは私のコードである

<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

あなたのコラム<div>にtext-centerを移動することができ、その後、この<div>のすべてのテキストは、（私の例では、最初の行）センタリングされます。
をクラスtext-centerで追加し、その中にアイコンを移動することができます（この例の2番目の行）。

<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'クラスを使用してください。[my answer]（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>

"テキスト・センター" クラスを別々のdivにフォント素晴らしいアイコンを入れて適用します。それは、フォントのすばらしいアイコンを中央に揃えます。

出典

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

これは私のコードである

答えて

関連する問題