Bootstrap 让 div 居中对齐

Question

我试图让页脚上的一些按钮与中心对齐，但由于某种原因它似乎不起作用。

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

我不确定是否需要使用 CSS 使其居中，或者是否应该只使用 align，但没有任何效果

Answer 1

在引导程序中，您可以使用.text-center来对齐中心。还将.row 和.col-md-* 添加到您的代码中。

align= 已弃用，

为演示添加了.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>

更新（2017 年 10 月）

对于正在阅读本文并想使用新版bootstrap（测试版）的人，您可以使用Boostrap Flexbox utilities classes以更简单的方式进行上述操作

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

Answer 2

当我在中心对齐元素时，我使用引导类 text-center:

<div class="text-center">Centered content goes here</div>