Wie zentriere ich ein Div mit Bootstrap 2?

Question

http://twitter.github.com/bootstrap/scaffolding.html

Ich habe wie alle Kombinationen versucht:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

oder

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

geänderte Spannen- und Versatznummern ...

Aber ich kann keine einfache Box bekommen, die perfekt auf einer Seite zentriert ist :(

Ich möchte nur eine 6 Spalten breite Box zentriert ...

---

Bearbeiten:

hat es mit gemacht

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

Aber die Box ist zu breit. Kann ich das mit span7 machen?

span7 offset2 gibt dem linken span7 offset3 zusätzliche Auffüllung rechts ...

Answer 1

Neben dem Verkleinern des Divs selbst auf die gewünschte Größe können Sie durch Verringern der Bereichsgröße wie folgt ... class="span6 offset3", class="span4 offset4" usw. ... etwas so Einfaches wie style="text-align: center" auf dem div den gewünschten Effekt erzielen

Sie können span7 nicht mit einem festgelegten Versatz verwenden und die Spanne auf der Seite zentrieren (weil die Gesamtzahl der Spans= 12 ist)

Answer 2

Die Spannweiten von Bootstrap werden nach links verschoben.Um sie zu zentrieren, müssen Sie dieses Verhalten nur überschreiben.Dazu füge ich dies meinem Stylesheet hinzu:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

Wenn Sie diese Klasse definiert haben, fügen Sie sie einfach der Spanne hinzu und los geht's.

<div class="span7 center"> box </div>

Beachten Sie, dass diese benutzerdefinierte Center-Klasse nach dem Bootstrap-CSS definiert werden muss.Sie könnten !important verwenden, aber das wird nicht empfohlen.

Answer 3

Bootstrap3 verfügt über die .center-block-Klasse, die Sie verwenden können.Es ist definiert als

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

Dokumentation hier .

Answer 4

Wenn Sie einen vollständigen Bootstrap durchführen möchten (und nicht den automatischen Links- / Rechtsweg), benötigen Sie ein Muster, das in 12 Spalten passt, z.2 Leerzeichen, 8 Inhalt, 2 Leerzeichen.Das ist es, was dieses Setup tun wird. Es deckt nur die -md- -Varianten ab. Ich neige dazu, es durch Hinzufügen von col-xs-12 auf kleine Größe zu bringen

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Answer 5

Klingt so, als wollten Sie nur einen einzelnen Container zentrieren. Das Bootstrap-Framework könnte das eine Beispiel überkomplizieren. Sie hätten einfach ein eigenständiges Div mit Ihrem eigenen Stil haben können, etwa:

<div class="login-container">
  <!-- Your Login Form -->
</div>

und Stil:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

Das sollte gut funktionieren, wenn Sie irgendwo in einem Bootstrap-.container-Div verschachtelt sind.

Answer 6

Fügen Sie die Klassenmittelinhalte hinzu

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

Answer 7

@ZuhaibAli-Code funktioniert für mich, aber ich habe ihn ein wenig geändert:

Ich habe eine neue Klasse in CSS erstellt

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

dann wird das div

<div class="center col-md-6"></div>

Ich habe col-md-6 für die Breite des Div selbst hinzugefügt, was in dieser Situation bedeutet, dass das Div halb so groß ist. Der Bootstrap enthält 1 bis 12 col md.

Answer 8

Befolgen Sie diese Anleitung https://getbootstrap.com/docs/3.3/css/

Verwenden Sie .center-block

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