Gibt es eine Möglichkeit, HTML-Elemente vertikal oder horizontal innerhalb der Haupteltern zu zentrieren?
css
twitter-bootstrap
da ich bin
quelle
quelle
<center></center>
Tag<center>
Tag war vor ungefähr 12 Jahren veraltet.Antworten:
Update : Obwohl diese Antwort wahrscheinlich Anfang 2013 richtig war, sollte sie nicht mehr verwendet werden. Die richtige Lösung verwendet Offsets .
Wie für andere Benutzer vorgeschlagen, gibt es auch native Bootstrap-Klassen wie:
danke an @Henning und @trejder
quelle
class="text-center"
.pagination-centered
als Alternative.text-center
für das Layout ist eine sehr schlechte Praxis. Die richtige Methode zum Ausrichten von Spalten in Bootstrap ist die Verwendung voncol-XX-offset-Y
Klassen. getbootstrap.com/css/#grid-offsetting . Diese Antwort war 2013 wahrscheinlich richtig, sollte aber heute nicht mehr verwendet werden.Aus der Bootstrap-Dokumentation :
quelle
Für zukünftige Besucher dieser Frage:
Wenn Sie versuchen, ein Bild in einem Div zu zentrieren, das Bild jedoch nicht zentriert wird, kann dies Ihr Problem beschreiben:
jsFiddle DEMO des Problems
Die
img-responsive
Klasse fügtdisplay:block
dem Bild-Tag eine Anweisung hinzu, die verhindert, dasstext-align:center
(text-center
Klasse) funktioniert.LÖSUNG:
jsFiddle of the solution
Das Hinzufügen der
center-block
Klasse überschreibt diedisplay:block
Anweisung, die mithilfe derimg-responsive
Klasse eingegeben wurde.Ohne die
img-responsive
Klasse würde das Bild nur durch Hinzufügen einertext-center
Klasse zentriertAktualisieren:
Außerdem sollten Sie die Grundlagen der Flexbox und deren Verwendung kennen, da Bootstrap4 sie jetzt nativ verwendet .
Hier ist ein exzellentes, schnelles Video-Tutorial von Brad Schiff
Hier ist ein toller Spickzettel
quelle
Aktualisiert 2018
In Bootstrap 4 haben sich die Zentrierungsmethoden geändert.
Horizontales Zentrum in BS4
text-center
wird immer noch fürdisplay:inline
Elemente verwendetmx-auto
ersetzt,center-block
umdisplay:flex
Kinder zu zentrierenoffset-*
odermx-auto
kann zum Zentrieren von Rasterspalten verwendet werdenmx-auto
(auto x-Achsen - Ränder) im Mittelpunktdisplay:block
oderdisplay:flex
Elemente , die eine haben definierte Breite , (%
,vw
,px
, etc ..). Flexbox wird standardmäßig für Rasterspalten verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.Demo Bootstrap 4 Horizontale Zentrierung
Informationen zur vertikalen Zentrierung in BS4 finden Sie unter https://stackoverflow.com/a/41464397/171456
quelle
Sie können direkt wie folgt in Ihre CSS-Datei schreiben:
quelle
ich benutze das
quelle
Für die horizontale Zentrierung können Sie Folgendes verwenden:
quelle
<img src="img/logo.png" style="float:none; margin:0 auto" />
. Umgebenimg
mit Elterndiv
und geben.text-center
oder.pagination-centered
Klasse Elternteil wirkt wie ein Zauber.Ich mag diese Lösung aus einer ähnlichen Frage. https://stackoverflow.com/a/25036303/2364401 Verwenden Sie die Bootstraps-
text-center
Klasse für die tatsächlichen Tabellendaten<td>
und Tabellenkopfelemente<th>
. So<td class="text-center">Cell data</td>
und
<th class="text-center">Header cell data</th>
quelle
Mit Bootstrap 4 können Sie Flex verwenden
Quelle: Bootstrap 4.1
quelle
Bootstrap 4 + Flex lösen dies
Sie können verwenden
Es sollte den Mittelpunkt horizontal und vertikal zentrieren
quelle
Ich habe in Bootstrap 4 festgestellt, dass Sie dies tun können:
Mitte horizontal ist in der Tat
text-center
KlasseBei der vertikalen Mitte wird jedoch bei Verwendung von Bootstrap-Klassen beides hinzugefügt,
mb-auto mt-auto
sodass Rand oben und Rand unten auf automatisch gesetzt werden.quelle
für Bootstrap4 vertikale Mitte weniger Elemente
D-Flex für Flex-Regeln
Flex-Säule für vertikale Richtung auf Gegenständen
Justify-Content-Center für die Zentrierung
style = 'height: 300px;' muss für Sollwerte haben, bei denen der Mittelpunkt berechnet werden soll, oder muss die Klasse h-100 verwenden
quelle