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

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> 

This is my code. I intend to center the font awesome icons to the center in their respective columns but I'm unable to do it.

Answer 1

1. You can move text-center to your column <div> , then all the text in this <div> will be centered (the first row in my example).
2. You can add extra <div> with class text-center and move your icon inside it (the second row in my example).

 <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

I think that this will work:

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

This brings it to the middle as the way u wanted.

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> 

Put the font awesome icon into a separate div and apply "text-center" class. It will align font-awesome icons to center.

Answer 5

使用这种最简单的方法：

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