Wie zentriere ich ein Div mit Bootstrap2?

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

tat es mit

<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 offset2gibt links span7 offset3zusätzliche Polsterung zusätzliche Polsterung rechts ...

neben Schrumpfen des div sich auf die Größe , die Sie möchten, indem Spannweite Größe reduziert , wie so ... class="span6 offset3", class="span4 offset4"etc, ... etwas so einfach wie style="text-align: center"auf dem div die Wirkung haben könnte , die Sie suchen

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

Die Spannweiten von Bootstrap werden nach links verschoben. Alles, was Sie brauchen, um sie zu zentrieren, ist, dieses Verhalten zu ü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 verwenden, !importantaber das wird nicht empfohlen.

Bootstrap3 hat die .center-blockKlasse, die Sie verwenden können. Es ist definiert als

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

Dokumentation hier .

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. B. 2 Leerzeichen, 8 Inhalte, 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>

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 Styling haben können, so etwas wie:

<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- .containerDiv verschachtelt sind .

Fügen Sie die Klassenmittelinhalte hinzu

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

@ZuhaibAli Code Art von Arbeit für mich, aber ich habe es ein wenig geändert:

Ich habe eine neue Klasse in CSS erstellt

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

dann wird der 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 bedeutete, dass das div halb so groß ist, es gibt 1 -12 col md im Bootstrap.

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

Verwenden .center-block

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

Wickeln Sie das Div in ein übergeordnetes Div mit Klasse rowund fügen Sie margin:0 auto;dem Div dann Stil hinzu

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>