Web-Design spielt eine Schlüsselrolle beim Erstellen einer angenehmen Benutzererfahrung. Ein wichtiger Aspekt des Designs einer Webseite ist die korrekte Anordnung der Elemente auf der Seite. Es gibt Situationen, in denen Sie eine Schaltfläche so ausrichten müssen, dass sie sich in der Mitte des Bildschirms befindet. In diesem Artikel werden wir uns ansehen, wie man dies mit CSS macht.
Es gibt mehrere Möglichkeiten, Elemente mit CSS zentriert auszurichten, aber die beliebteste Methode ist die Verwendung einer Kombination von Eigenschaften display: flex und justify-content: center. Flexbox ist ein leistungsfähiges CSS-Modul, mit dem Sie die Anordnung von Elementen innerhalb eines Containers einfach steuern können.
Um eine Schaltfläche mit CSS in der Mitte zu platzieren, müssen Sie zuerst einen Container erstellen, in dem sich die Schaltfläche befindet. Fügen Sie diesem Container dann einen Stil hinzu display: flex und justify-content: center. Danach wird die Schaltfläche automatisch in der Mitte der horizontalen Achse ausgerichtet.
Erste Schritte
Bevor Sie die Schaltfläche mit CSS zentrieren, müssen Sie einige einfache Schritte ausführen.
Schritt 1: Erstellen Sie eine HTML-Datei mit der Erweiterung .html und öffnen Sie es in einem beliebigen Texteditor.
Schritt 2: Schreiben Sie den folgenden Code in die Datei:
Schritt 3: Speichern Sie die Datei und schließen Sie sie.
Schritt 4: Erstellen Sie eine neue Datei mit der Erweiterung .css und öffnen Sie es in einem Texteditor.
Schritt 5: Schreiben Sie den folgenden Code in die Datei:
Schritt 6: Speichern Sie die Datei und schließen Sie sie.
Schritt 7: Kehren Sie zur HTML-Datei zurück, und fügen Sie dem Abschnitt den folgenden Code hinzu :
Schritt 8: Speichern Sie die HTML-Datei und öffnen Sie sie in einem Webbrowser. Sie sollten eine Schaltfläche in der Mitte der Seite sehen.
Jetzt kennen Sie die ersten Schritte, die erforderlich sind, um die Schaltfläche mit CSS in der Mitte zu platzieren. Sie können diesen Code ergänzen oder auf andere Elemente auf Ihrer Seite anwenden.
Zentrieren einer Schaltfläche mit Margin
Sie können den folgenden Ansatz verwenden, um eine Schaltfläche mit der Margin-Eigenschaft zu zentrieren:
1. Erstellen Sie einen Container mit dem Element, in dem die Schaltfläche platziert werden soll:
2. Fügen Sie mithilfe des Elements eine Schaltfläche in den Container ein :
3. Wenden Sie die folgenden Stile auf den Container und die Schaltfläche an:
4. Schließen Sie den Behälter:
Dadurch befindet sich die Schaltfläche in der Mitte des Containers.
Beispiel für vollständigen Code:
Auf diese Weise können Sie die Schaltfläche einfach mit CSS auf der Seite zentrieren.
Zentrieren einer Schaltfläche mit Flexbox
Flexbox ist ein leistungsfähiges Werkzeug, mit dem Sie die Anordnung von Elementen innerhalb eines Containers flexibel steuern können. Folgen Sie den folgenden Schritten, um eine Schaltfläche mit Flexbox zu zentrieren:
1. Erstellen Sie einen Container, in dem sich die Schaltfläche befindet:
.container2. Erstellen Sie eine Schaltfläche im Container:
Durch diese Schritte wird die Schaltfläche automatisch sowohl horizontal als auch vertikal innerhalb des Containers zentriert. Mit den Eigenschaften justify-content und align-items weisen wir dem Browser an, dass Elemente sowohl horizontal als auch vertikal zentriert ausgerichtet werden müssen.
Die Verwendung von Flexbox zum Zentrieren einer Schaltfläche ist eine bequeme und effektive Möglichkeit, ein zentriertes Layout Ihrer Webseite zu erstellen. Probieren Sie es in Ihrem Projekt aus und sehen Sie sich seine Vorteile an!
Zentrieren einer Schaltfläche mit einem Grid
1. Erstellen Sie mit dem div-Element einen Container für die Schaltfläche, und weisen Sie ihm die container-Klasse zu :
2. Definieren Sie die Stile für den Container mithilfe der Eigenschaft display: grid :
Display-Eigenschaft: grid gibt an, dass das Element das Raster verwendet, und die place-items: center-Eigenschaft positioniert den Inhalt des Containers horizontal und vertikal zentriert.
3. Erstellen Sie eine Schaltfläche im Container:
4. Wenden Sie Stile auf die Schaltfläche an. Sie können beispielsweise die Padding-Eigenschaft verwenden, um Einrückungen hinzuzufügen :
buttonDie Schaltfläche wird nun mit einem Grid innerhalb des Containers zentriert.
Adaptive Knopfzentrierung
Sie können den folgenden CSS-Code verwenden, um eine Schaltfläche in der Mitte der Seite zu platzieren:
HTML:
CSS:
.center-button
Dieser Code erstellt eine Schaltfläche mit der Klasse "center-button" und wendet die Stile zum Zentrieren auf sie an. Mit der Eigenschaft "display: flex;" kann ein Element die gesamte verfügbare Seitenbreite einnehmen. Die Eigenschaften "justify-content: center;" und "align-items: center;" richten den Inhalt der Schaltfläche horizontal bzw. vertikal aus. Die Breite der Schaltfläche wird durch die Eigenschaft "width: 200px" festgelegt;", Höhe ist "height: 50px;". Die Eigenschaft "margin: 0 auto;" gibt die automatische horizontale Ausrichtung an, wodurch die Schaltfläche auf der Seite zentriert wird.
Auf diese Weise hilft Ihnen dieser Code, die Schaltfläche unabhängig von ihrer Größe und Größe des Browserfensters adaptiv in der Mitte der Seite zu positionieren.
