Mit CSS (Cascading Style Sheets) können Sie einer HTML-Webseite das bestmögliche Aussehen verleihen. Jedes einzelne Element auf einer Seite kann mithilfe von CSS auf jede beliebige Weise angeordnet werden. Horizontal und vertikal ausgerichtete Elemente können Sie verwenden. CSS-Schaltflächen müssen mittig ausgerichtet sein, wenn sie in der Mitte einer Webseite oder innerhalb eines Divs platziert werden sollen.
Bevor wir fortfahren, möchten wir uns bei komik.dk für die Unterstützung bei der Erstellung dieses Leitfadens bedanken.
Verwenden Sie das folgende Verfahren, um eine CSS-Schaltfläche mittig auszurichten.
Zentrieren: Text-align – Ändern Sie einfach die Textausrichtung in der Eigenschaft des div-Tags auf center.
margin: auto – Durch Auswahl der Option auto margin im Eigenschaftenfenster
position: fixed – Indem Sie das Attribut position auf fixed setzen
display: flex – Indem Sie das Attribut display in flex ändern
display: grid – Sie können das Gitter anzeigen, indem Sie das Attribut display für das Gitter auswählen.
1. Indem Sie das Attribut text-align des body-Tags zentrieren (text-align: center)
In diesem Beispiel verwenden wir das Attribut ‚text-align‘ center für den ‚body>-Tag, der automatisch alles darin zentriert.
2. Indem Sie das Attribut text-align des übergeordneten div-Tags zentrieren (text-align: center)
Im folgenden Beispiel verwenden wir die Eigenschaft ‚text-align‘ center auf einem div>-Element mit der Klasse (button-container-div), um sicherzustellen, dass alles, was in diesem div>-Element enthalten ist, automatisch zentriert ausgerichtet wird.
3. Zentrieren Sie die CSS-Schaltfläche mithilfe der Eigenschaft margin auto (Margin: auto)
Wir verwenden die Auto-Eigenschaft ‚ Margin‘. Margin zentriert das Div automatisch auf dem Bildschirm.
4. Verwenden Sie eine CSS-Schaltfläche mit fester Position, um sie zu zentrieren.
In diesem Beispiel setzen wir einen Rand von 50 % vom linken Rand der Seite und verwenden dann position: fixed, um den Textkörper zu zentrieren.
5. Durch die Angabe der Eigenschaft flex für die Eigenschaft display (display: flex)
In diesem Beispiel wenden wir die Flex-Eigenschaft „display“ sowie die Eigenschaften „justify-content“ und „align-items“ auf den übergeordneten div>-Tag mit der Klasse (button-container-div) an. Die im div> enthaltene Schaltfläche wird sowohl in der vertikalen als auch in der horizontalen Achse zentriert.
Justify-content zentriert die Schaltfläche horizontal.
Mit der Option Elemente ausrichten bleibt es in der Mitte. Andernfalls würde es am oberen Rand des Divs beginnen und sich nach unten arbeiten.
Wie man eine Schaltfläche in CSS horizontal zentriert
Es kann ein wenig schwierig sein, aber hier sind einige schnelle Techniken, um Ihre Schaltfläche zu zentrieren, unabhängig vom Elementtyp.
Elemente in der Mitte ausrichten
Um ein Blockelement (wie z.B. div>) horizontal zu zentrieren, verwenden Sie margin: auto;
Die Einstellung der Breite des Elements verhindert, dass es sich über die Grenzen seines Containers hinaus ausdehnt.
Das Element füllt dann die gewünschte Breite aus und lässt zwischen den beiden Rändern gleich viel Platz:
Dieses div-Element hat eine zentrale Position.
Schaltflächenelement mit einem Inline-Block
Standardmäßig sind Schaltflächen- und Link-Elemente auf display: inline-block eingestellt. Sie werden einen Teil mit der Einstellung inline-block in den üblichen Links-nach-Rechts-Fluss des Dokuments auf der Seite einschließen.
Das bedeutet, dass zwei Inline-Block-Komponenten nebeneinander erscheinen, wenn genügend horizontaler Abstand zwischen ihnen vorhanden ist.
Dies ist vergleichbar mit Elementen, bei denen display: inline gesetzt ist, mit dem Unterschied, dass bei Inline-Block-Elementen die Höhe und Breite gesteuert werden kann, bei Inline-Elementen jedoch nicht.
Verwenden Sie text-align: center, um den Text zu zentrieren
Wenn Sie text-align: center auf ein übergeordnetes Element setzen, können Sie Inline-Block- (und Inline-) Elemente zentrieren.
Unser Schaltfläche>-Element ist in ein div>-Element mit der Einstellung text-align: center eingeschlossen.
Mit einer festen Breite ist dies ein Block-Schaltflächenelement.
Text-align: center kann nicht verwendet werden, um Blockkomponenten zu zentrieren, da sie standardmäßig über die gesamte Breite gehen, es sei denn, sie haben eine statische Breite.
Wenn Sie jemals die statische Breite einer Schaltfläche festlegen müssen, können Sie diese Technik verwenden, um die Schaltfläche auf der Seite zu zentrieren.
Nehmen wir an, wir haben eine Schaltfläche, die 200px breit ist. Obwohl sie nur 200 Pixel breit ist, können keine weiteren Elemente daneben platziert werden.
Sie können ein Element auf Blockebene zentrieren, indem Sie margin-left und margin-right auf auto setzen. Dazu können wir das Kürzel margin: 0 auto verwenden. (Dadurch werden auch margin-top und margin-bottom auf Null gesetzt.)
Flexbox zum Zentrieren verwenden
Alternativ können Sie auch Flexbox verwenden, um sowohl Inline-Block- als auch Block-Elemente zu zentrieren.
Wickeln Sie die Schaltfläche in ein übergeordnetes div> ein und machen Sie sie sichtbar: center flex und justify-content.
Die Flexbox-Einstellungen ermöglichen die horizontale und vertikale Zentrierung der Schaltfläche. Wir können das Schaltflächenelement horizontal zentrieren, indem wir die CSS-Eigenschaft align-items mit dem Wert center verwenden. Gleichzeitig können wir die CSS-Eigenschaft justify-content in Verbindung mit dem Wert center verwenden, um das Schaltflächenelement vertikal zu zentrieren.
Um ein Schaltflächenelement horizontal und vertikal zu zentrieren, müssen wir zusätzlich zu dem Wert center die CSS-Eigenschaften justify-content und align-items angeben.
Verwendung der CSS-Eigenschaft transform
Neben der Eigenschaft flexbox können wir auch eine Reihe von CSS-Eigenschaften verwenden, um die Schaltfläche horizontal und vertikal zentriert auszurichten. Fügen Sie der Containerklasse und der Klasse, die die Schaltfläche enthält, relative und absolute Positionen hinzu. Zentrieren Sie nun die Schaltfläche mit left:50% und top:50% im Container. Verwenden Sie außerdem transform: translate (-50 Prozent, -50 Prozent).
Zwei nebeneinander liegende Schaltflächen
Es kann vorkommen, dass Sie zwei Schaltflächen nebeneinander, aber mittig auf der Seite haben möchten.
Sie können dies erreichen, indem Sie beide Schaltflächen in ein übergeordnetes div> einpacken und sie mit Flexbox auf der Seite zentrieren.
Insbesondere haben wir margin-right: 20px zur ersten Schaltfläche hinzugefügt, um sie zu trennen.
Verwendung der CSS-Modelle flexbox und grid zum Zentrieren einer Schaltfläche
Außerdem können Sie ein Schaltflächenelement zentrieren, indem Sie den Anzeigemodus des Containerelements auf flex oder grid ändern und ihm die Eigenschaft justify-content: center hinzufügen.
Wenn Sie z.B. ein div> als Container für das Element button> verwenden, zentriert diese CSS-Regel das unzufriedene > horizontal:
.center-h {
display: flex; /* oder display:grid */
justify-content: center;
}
Der Vorteil der Verwendung einer Flexbox- oder Grid-CSS-Architektur ist, dass Sie Inhalte vertikal und horizontal zentrieren können.
Abschließende Überlegungen zur horizontalen Zentrierung einer Schaltfläche in CSS
Dies sind die CSS-Methoden für die horizontale Zentrierung einer Schaltfläche. Alle Strategien sind auf ihre Weise vorteilhaft, je nach Verwendungszweck und Zweck. Die beste Technik ist jedoch die Verwendung der Eigenschaft Flex-box. Und die andere ist die Wahl der Methode, die Sie für Ihr Problem und Ihr Szenario für am besten geeignet halten.
Lesen Sie auch unsere Anleitung über: Wie man ein Video in HTML zentriert!
