twitter-bootstrap 将字体真棒图标对齐到中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42315431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning font-awesome icons to center
提问by Rohan Mayya
<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.
这是我的代码。我打算将字体真棒图标居中到各自列的中心，但我无法做到。
回答by sergdenisov
- You can move
text-centerto your column<div>, then all the text in this<div>will be centered (the first row in my example). - You can add extra
<div>with classtext-centerand move your icon inside it (the second row in my example).
- 您可以移动
text-center到您的 column<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>回答by Bijal Patel
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>
回答by Venky
.center{
text-align:center;
width:50%;
}
HTML
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.
这将它按照您想要的方式带到中间。
回答by Subash Matheswaran
<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.
将字体真棒图标放入单独的 div 并应用“文本中心”类。它将字体很棒的图标对齐到中心。
回答by Piyali
Use this simplest way:
使用这个最简单的方法：
<div class="text-center"><i class="fa fa-book fa-3x text-center" aria-hidden="true"></i></div>
