web-dev-qa-db-fra.com

Centrer un bouton Twitter Bootstrap

Je crée un formulaire avec Twitter Bootstrap et j'ai du mal à centrer le bouton. Il est contenu dans une div avec une étendue de 7. Vous trouverez ci-dessous le HTML et le bouton tout en bas. Des recommandations sur la façon de centrer cette chose?

<div class="form span7">
  <div id="get-started">
    <div id="form-intro">
      <strong><h1>1. Get Started: Some basics</h1></strong>
    </div>
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputSaving">What are you saving for?</label>
        <div class="controls">
          <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="description">Add a short description</label>
        <div class="controls">
          <textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="categoryselect">Choose a Category</label>
        <div class="controls">
          <select class="span4" id="categoryselect">
            <!-- Add some CSS and JS to make a placeholder value-->
            <option value="Kittens">Kittens</option>
            <option value="Keyboard Cat">Keyboard Cat</option>
            <option value="Twitter Bird">Twitter Bird</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="imageselect">Choose an image</label>
        <div class="controls span4">
          <img src="piggyimage.png" id="imageselect" alt="image-select" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="goal">Your Saving Goal</label>
        <div class="controls">
          <input type="text" class="span4" id="goal" placeholder="$1337">
        </div>
      </div>
      <button class="btn btn-large btn-primary" type="button">Submit</button>
    </form>
  </div>
</div>
htmlcssbuttontwitter-bootstrap
38
Tom Maxwell

Bootstrap a sa propre classe de centrage nommée text-center .

<div class="span7 text-center"></div>

66
Lucas Santos

Si cela ne vous dérange pas un peu plus de balisage, cela fonctionnerait:

<div class="centered">
    <button class="btn btn-large btn-primary" type="button">Submit</button>
</div>

Avec la règle CSS correspondante:

.centered
{
    text-align:center;
}

Je dois examiner les règles CSS pour la classe btn, mais je ne pense pas qu'elle spécifie une largeur, donc les marges auto gauche et droite ne fonctionneraient pas. Si vous avez ajouté l'une des règles span ou input- au bouton, les marges automatiques fonctionneraient, cependant.

Modifier:

Confirmé ma pensée initiale; les classes btn n'ont pas une largeur définie, vous ne pouvez donc pas utiliser les marges latérales automatiques. De plus, en tant que @AndrewM notes, vous pouvez simplement utiliser la classe text-center au lieu de créer un nouvel ensemble de règles.

30
Tieson T.

Enveloppez-vous dans un div avec la classe "text-center".

18
Vladimir Dimchev

La question est un peu ancienne, mais le moyen le plus simple est d’appliquer .center-block au bouton.

11
TimNguyenBSM

Puisque vous voulez centrer le bouton, et non le texte, ce que j'ai fait par le passé est d'ajouter une classe, puis utilisez cette classe pour centrer le bouton:

<button class="btn btn-large btn-primary newclass" type="button">Submit</button>

et le CSS serait:

.btn.newclass {width:25%; display:block; margin: 0 auto;}

La valeur "width" est à vous, et vous pouvez jouer avec cela pour obtenir le bon look.

Steve

4
Steve
.span7.btn { display: block;   margin-left: auto;   margin-right: auto; }

Je ne suis pas complètement familiarisé avec bootstrap, mais quelque chose comme ce qui précède devrait faire l'affaire. Il n'est peut-être pas nécessaire d'inclure toutes les classes. Cela devrait centrer le bouton dans son parent, le span7.

3
Ronnie

Si vous avez plus d'un bouton, vous pouvez alors procéder comme suit.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>
1
Rusty

Bootstrap a une classe spécifique pour ceci: Center-block

<button type="button" class="your_class center-block"> Book </button>
1
Gregory