Zentrieren einer Twitter-Bootstrap-Schaltfläche

Ich erstelle ein Formular mit Twitter Bootstrap und habe wirklich Schwierigkeiten, die Schaltfläche zu zentrieren. Es ist in einem div mit einer Spanne von 7 enthalten. Darunter befindet sich der HTML-Code, und die Schaltfläche befindet sich ganz unten. Irgendwelche Empfehlungen, wie man dieses Ding zentriert?

<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="https://stackoverflow.com/questions/14271825/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>

Bootstrap hat eine eigene Zentrierklasse mit dem Namen Textzentrum.

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

Wenn Sie etwas mehr Markup nicht stören, würde dies funktionieren:

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

Mit der entsprechenden CSS-Regel:

.centered
{
    text-align:center;
}

Ich muss mir die CSS-Regeln dafür ansehen btn Klasse, aber ich glaube nicht, dass es eine Breite angibt, also auto Linker und rechter Rand funktionieren nicht. Wenn Sie eine der hinzugefügt haben span oder input- Regeln auf die Schaltfläche, automatische Ränder möchten Arbeit, obwohl.

Bearbeiten:

Bestätigt meinen ersten Gedanken; das btn Klassen tun nicht haben eine definierte Breite, sodass Sie keine automatischen Seitenränder verwenden können. Wie @AndrewM feststellt, könnten Sie auch einfach die verwenden text-center Klasse, anstatt einen neuen Regelsatz zu erstellen.

Umschließen Sie ein Div, das mit der Klasse “text-center” gestaltet ist.

Die Frage ist etwas alt, aber eine einfache Möglichkeit besteht darin, .center-block auf die Schaltfläche anzuwenden.

Da Sie die Schaltfläche und nicht den Text zentrieren möchten, habe ich in der Vergangenheit eine Klasse hinzugefügt und dann diese Klasse verwendet, um die Schaltfläche zu zentrieren:

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

und das CSS wäre:

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

Der Wert “Breite” liegt bei Ihnen, und Sie können damit spielen, um das richtige Aussehen zu erhalten.

Steve

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

Ich bin mit Bootstrap nicht ganz vertraut, aber so etwas wie das obige sollte den Zweck erfüllen. Es ist möglicherweise nicht erforderlich, alle Klassen einzubeziehen. Dies sollte die Schaltfläche innerhalb ihres übergeordneten Elements, der span7, zentrieren.

Wenn Sie mehr als eine Schaltfläche haben, können Sie Folgendes tun.

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