Html Bootstrap 让 div 居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35879688/
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
Bootstrap get div to align in the center
提问by CamelHump
I am trying to get some buttons on my footer to align to the center but for some reason it does not seem to work.
我试图让我的页脚上的一些按钮与中心对齐，但由于某种原因它似乎不起作用。
<div class="footer">
<div class="container">
<div class="navbar-text pull-left">
<p> Hello there </p>
</div>
<div class="Button" align="center">
<a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
<a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
</div>
I am not sure if I need to use CSS to make it go in the middle or if I should just use align, but nothing is working
我不确定是否需要使用 CSS 使其居中，或者我是否应该只使用 align，但没有任何效果
回答by dippas
In bootstrap you can use .text-centerto align center. also add .rowand .col-md-*to your code.
在引导程序中，您可以使用.text-center对齐中心。还将.row和添加.col-md-*到您的代码中。
align=is deprecated,
align=已弃用，
Added .col-xs-*for demo
添加.col-xs-*用于演示
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-4">
<p>Hello there</p>
</div>
<div class="col-xs-4 text-center">
<a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
<a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
</div>
<div class="col-xs-4 text-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
</div>
</div>UPDATE(OCT 2017)
更新（2017 年 10 月）
For those who are reading this and want to use the new version of bootstrap (beta version), you can do the above in a simpler way, using Boostrap Flexbox utilities classes
对于正在阅读本文并希望使用新版本引导程序（测试版）的人，您可以使用 Boostrap Flexbox 实用程序类以更简单的方式完成上述操作
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container footer">
<div class="d-flex justify-content-between">
<div class="p-1">
<p>Hello there</p>
</div>
<div class="p-1">
<a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
<a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
</div>
<div class="p-1">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
</div>回答by Dimitar Popov
When I align elements in center I use the bootstrap class text-center:
当我在中心对齐元素时，我使用引导类 text-center：
<div class="text-center">Centered content goes here</div>
<div class="text-center">Centered content goes here</div>
