wake-up-neo.net

Eine Twitter-Bootstrap-Schaltfläche zentrieren

Ich mache ein Formular mit Twitter Bootstrap und habe es wirklich schwer, den Button zu zentrieren. Es ist in einem Div mit einer Spannweite von 7 enthalten. Unten ist der HTML-Code und die Schaltfläche ganz unten. Gibt es Empfehlungen, wie man dieses Ding zentrieren kann?

<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>
38
Tom Maxwell

Bootstrap hat eine eigene Zentrierungsklasse mit dem Namen text-center .

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

66
Lucas Santos

Wenn es Ihnen nichts ausmacht, etwas mehr Markup zu machen, 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 für die btn-Klasse ansehen, aber ich denke nicht, dass sie eine Breite angibt, daher würden auto linke und rechte Ränder nicht funktionieren. Wenn Sie der Schaltfläche eine der Regeln span oder input- hinzugefügt haben, funktionieren die automatischen Ränder jedoch.

Bearbeiten:

Bestätigte meinen ersten Gedanken; Die btn-Klassen haben not eine definierte Breite, daher können Sie keine automatischen Seitenränder verwenden. Als @AndrewM notes können Sie auch einfach die text-center-Klasse verwenden, anstatt einen neuen Regelsatz zu erstellen.

30
Tieson T.

Umhüllen Sie ein Div mit der Klasse "Text-Center".

18

Die Frage ist ein bisschen alt, aber der .center-Block kann einfach auf die Schaltfläche angewendet werden.

11
TimNguyenBSM

Da Sie die Schaltfläche zentrieren möchten und nicht den Text, habe ich in der Vergangenheit eine Klasse hinzugefügt. Verwenden Sie dann diese Klasse, 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 für "width" liegt bei Ihnen, und Sie können damit spielen, um den richtigen Look zu erhalten.

Steve

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

Ich bin mit Bootstrap nicht ganz vertraut, aber so etwas sollte den Trick tun. Es ist möglicherweise nicht erforderlich, alle Klassen einzubeziehen. Dies sollte die Schaltfläche innerhalb des übergeordneten Elements zentr7 zentrieren.

3
Ronnie

Wenn Sie mehr als eine Taste 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>
1
Rusty

Bootstrap hat dafür eine bestimmte Klasse: Center-block

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