Ich muss eine reaktionsfähige Seite mit Bootstrap erstellen, indem ich ein Div in der Mitte einer Seite positioniere, wie im unten genannten Layout.
css
twitter-bootstrap
responsive-design
Rama Priya
quelle
quelle
Antworten:
UPDATE für Bootstrap 4
Einfachere vertikale Gitterausrichtung mit Flexbox
Lösung für Bootstrap 3
Es ist ein einfaches Beispiel für eine horizontale und vertikale Teilung, die in allen Bildschirmgrößen zentriert ist.
quelle
class="col-xs-4 col-xs-offset-4"
sollte es genug sein.CSS:
HTML:
Beispiel Geige
quelle
In Bootstrap 4
um den Childs horizontal zentriert , Verwendung Bootstrap-4 - Klasse
um die Childs vertikal zentriert , Verwendung Bootstrap-4 - Klasse
Aber denken Sie daran, vergessen Sie nicht, die d-flex-Klasse mit diesen zu verwenden. Es handelt sich um eine Bootstrap-4-Dienstprogrammklasse
Hinweis: Stellen Sie sicher, dass Sie Bootstrap-4-Dienstprogramme hinzufügen, wenn dieser Code nicht funktioniert
quelle
Update für Bootstrap 4
Jetzt, da Bootstrap 4 Flexbox ist, ist die vertikale Ausrichtung einfacher. Bei einem Flexbox-Div in voller Höhe nur wir
my-auto
für gleichmäßige obere und untere Ränder ...http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center
Vertikale Mitte in Bootstrap 4
quelle
Sie müssen nichts in CSS ändern. Sie können dies direkt in der Klasse schreiben und erhalten das Ergebnis.
quelle
Ohne Anzeigetabelle und ohne Bootstrap würde ich das lieber tun
http://codepen.io/matoeil/pen/PbbWgQ
quelle
Gute Antwort ppollono. Ich habe nur rumgespielt und eine etwas bessere Lösung gefunden. Das CSS würde gleich bleiben, dh:
Aber für HTML:
Das wäre genug.
quelle
Nicht der beste Weg, wird aber trotzdem funktionieren
quelle
Ich denke, der einfachste Weg, das Layout mit Bootstrap zu erreichen, ist folgender:
Alles, was ich getan habe, war, Ebenen von Divs hinzuzufügen, mit denen ich das Div zentrieren konnte. Da ich jedoch keine Prozentsätze verwende, müssen Sie die maximale Breite des Div angeben, um zentriert zu werden.
Sie können dieselbe Methode verwenden, um mehr als eine Spalte zu zentrieren. Sie müssen lediglich weitere Div-Ebenen hinzufügen:
Hinweis: Ich habe ein Div mit Spalte 12 für md, sm und xs hinzugefügt. Wenn Sie dies nicht tun, wird das erste Div mit Hintergrundfarbe (in diesem Fall "blueviolet") zusammenbrechen und Sie können die untergeordneten Divs sehen , aber nicht die Hintergrundfarbe.
quelle
Für die aktuelle Version von Bootstrap 4.3.1 verwenden
Stil
Code
quelle
Versuchen Sie dies. Für das Beispiel habe ich eine feste Höhe verwendet. Ich denke, es hat keinen Einfluss auf das Reaktionsszenario.
quelle
Verwenden Sie in Bootstrap 4:
Sie können die Position auch ändern, je nachdem, was Sie möchten:
Referenz hier
quelle
Hier sind einfache CSS-Regeln, die jedes Div in den Mittelpunkt stellen
https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
quelle
Die einfachste Lösung besteht darin, auf beiden Seiten eine leere Spalte wie folgt hinzuzufügen:
quelle
jsFiddle
HTML :
CSS :
quelle