web-dev-qa-db-fra.com

Bootstrap get div pour s'aligner au centre

J'essaie de placer des boutons sur mon pied de page pour les aligner sur le centre, mais pour une raison quelconque, cela ne semble pas fonctionner.

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

Je ne sais pas si j'ai besoin d'utiliser CSS pour le placer au milieu ou si je dois simplement utiliser align, mais rien ne fonctionne

csshtml5twitter-bootstrapcss3twitter-bootstrap-3
15
CamelHump

Dans bootstrap vous pouvez utiliser .text-centerpour aligner le centre. ajoutez également .row et .col-md-* à votre code.

align= est obsolète,

Ajoutée .col-xs-* pour la démo

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

MISE À JOUR (OCT 2017)

Pour ceux qui lisent ceci et qui veulent utiliser la nouvelle version de bootstrap (version bêta), vous pouvez faire ce qui précède d’une manière plus simple, en utilisant Boostrap classes d’utilitaires 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>
24
dippas

Quand j'aligne des éléments au centre, j'utilise le bootstrap class text-center:

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

14
Dimitar Popov