In Bootstrap 4 sollte man die text-center
Klasse verwenden, um Inline-Blöcke auszurichten .
HINWEIS: Die text-align:center;
Definition in einer benutzerdefinierten Klasse, die Sie auf Ihr übergeordnetes Element anwenden, funktioniert unabhängig von der verwendeten Bootstrap-Version. Und genau das .text-center
gilt.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col text-center">
<button class="btn btn-default">Centered button</button>
</div>
</div>
</div>
Wenn der zu zentrierende Inhalt Block oder Flex ist (nicht inline-
), kann man ihn mit Flexbox zentrieren :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="d-flex justify-content-center">
<button class="btn btn-default">Centered button</button>
</div>
... was für display: flex; justify-content: center
Eltern gilt.
Hinweis: Verwenden Sie nicht .row.justify-content-center
anstelle von .d-flex.justify-content-center
, da .row
bei bestimmten Reaktionsintervallen negative Ränder angewendet werden, was zu unerwarteten horizontalen Bildlaufleisten führt (es .row
sei denn, es handelt sich um ein direktes untergeordnetes Element von .container
, das bei den richtigen Reaktionsintervallen einen seitlichen Abstand anwendet, um dem negativen Rand entgegenzuwirken). Wenn Sie .row
aus irgendeinem Grund den Rand und die Polsterung überschreiben müssen .m-0.p-0
, erhalten Sie in diesem Fall fast die gleichen Stile wie .d-flex
.
Wichtiger Hinweis: Die zweite Lösung ist problematisch, wenn der zentrierte Inhalt (die Schaltfläche) die Breite des übergeordneten Inhalts () überschreitet, .d-flex
insbesondere wenn das übergeordnete Element die Breite des Ansichtsfensters hat, insbesondere weil es unmöglich ist, horizontal zum Anfang des Inhalts zu scrollen (links-) die meisten).
Verwenden Sie es also nicht, wenn der zu zentrierende Inhalt breiter als die verfügbare übergeordnete Breite werden kann und auf alle Inhalte zugegriffen werden sollte.
Versuchen Sie dies mit Bootstrap
CODE:
VERKNÜPFUNG:
https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content
quelle
Hier ist der vollständige HTML-Code, den ich zum Zentrieren nach Schaltflächen im Bootsrap-Formular nach dem Schließen der Formulargruppe verwende:
quelle
Mit den Bootstrap 4-Dienstprogrammen können Sie ein Element selbst horizontal zentrieren, indem Sie die horizontalen Ränder auf "Auto" setzen.
Um die horizontalen Ränder auf Auto zu setzen, können Sie verwenden
mx-auto
. Dasm
bezieht sich auf den Rand und dasx
bezieht sich auf die x-Achse (links + rechts) undauto
bezieht sich auf die Einstellung. Dadurch werden der linke und der rechte Rand auf die Einstellung "Auto" gesetzt. Browser berechnen den Rand gleichmäßig und zentrieren das Element. Die Einstellung funktioniert nur für Blockelemente, daher muss der display: block hinzugefügt werden, und mit den Bootstrap-Dienstprogrammen wird dies von durchgeführtd-block
.Sie können davon ausgehen, dass alle Browser die Einstellungen für den automatischen Rand gemäß dieser Antwort vollständig unterstützen. Browserunterstützung für den Rand: automatisch , damit die Verwendung sicher ist.
Die Bootstrap 4-Klasse
text-center
ist ebenfalls eine sehr gute Lösung, benötigt jedoch ein übergeordnetes Wrapper-Element. Der Vorteil der Verwendung des automatischen Randes besteht darin, dass dies direkt auf dem Schaltflächenelement selbst erfolgen kann.quelle
Verwenden Sie die
text-center
Klasse im übergeordneten Container für Bootstrap 4quelle
Für eine Schaltfläche in einer reduzierten Navigationsleiste hat nichts oben für mich funktioniert, also habe ich in meiner CSS-Datei .....
und es hat funktioniert!!
quelle
Was für mich funktioniert hat war (passen Sie "css / style.css" an Ihren CSS-Pfad an):
Kopf HTML:
Body HTML:
CSS:
quelle
Sie können auch einfach mit einer H-Klasse oder einer P-Klasse mit einem Textcenter-Attribut umbrechen
quelle