Wie zentriere ich ein Div mit Bootstrap2?

84

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:

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

css twitter-bootstrap twitter-bootstrap-2

— Alex
quelle

Möchten Sie ein Feld horizontal auf der Seite zentrieren? Da die containerKlasse dies bereits tut, dachten Sie, Sie möchten möglicherweise eine kleinere Box zentrieren. Oder möchten Sie ein Feld horizontal und vertikal auf der Seite zentrieren?

— Andres Ilich

14

eine Box, die du sagst? . . . .hier in der Entwicklerwelt nennen wir das einen div

— pythonian29033

Welche Version von Bootstrap haben Sie verwendet? Dies sollte sich im Titel widerspiegeln, da Personen, die dies nachschlagen, hier landen und veralteten Code sehen.

— JGallardo

46

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

— csturtz
quelle

12

Betrachten Sie Zuhaib Alis Antwort. text-align: center funktioniert nicht zum Zentrieren von Elementen innerhalb eines <div>. Die Offset * -Klasse zentriert Komponenten nicht wirklich. Es schafft lediglich die Illusion der Zentrierung. Sie können dies überprüfen, indem Sie die Größe des Fensters ändern und sicherstellen, dass die Komponenten nicht zentriert bleiben. Wenn Sie die Methode von Zuhaib Ali anwenden, bleiben die Komponenten zentriert.

— BigSauce

Anstatt Inline-Styling hinzuzufügen (style = "text-align: center"), fügen Sie die Klasse "center-block" hinzu und erhalten Sie zentrierten Inhalt in Ihrem zentrierten div.

— Shawn Taylor

col-md-4 oder col-lg-4 ist gleich einem Rand: 0 auto; ?

— Jruzafa

165

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.

— Zuhaib Ali
quelle

5

JA! Danke, Zuhaib! Hat perfekt funktioniert. Diese Antwort sollte als die richtige Antwort auf diese Frage gewählt werden.

— BigSauce

@ZuhaibAli Hinzufügen float: none;Beheben Sie mein Problem.

— SIFE

1

Ich benutze Rails, deshalb möchte ich nur darauf hinweisen, dass in application.css *= require bootstrap.min vor *= require_self und*= require_tree

2

Dies funktionierte nicht für mich, aber das Hinzufügen display: tableschien es zu beheben

— Peter Berg

1

Gute Antwort! Von nun an damit arbeiten.

— Serv-Bot 22

35

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 .

— Casey
quelle

20

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>

— Craig
quelle

Ist das eine gültige Methode, um Divs in Boostrap zu zentrieren?

— Gavindra Kalikapersaud

1

Der Inhalt des Div ist nicht zentriert, aber der Div selbst ist.

— Craig

8

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 .

— cstrat
quelle

3

Fügen Sie die Klassenmittelinhalte hinzu

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

— mrpix
quelle

0

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

— jakson
quelle

0

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

Verwenden .center-block

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

— core114
quelle

0

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>

— Mahmoud Farahat
quelle