Das Zentrieren einer Schaltfläche auf einer Webseite ist möglicherweise nicht so einfach, besonders für Anfänger. Es gibt jedoch eine einfache Möglichkeit, dies zu tun, ohne komplexe CSS- oder JavaScript-Stile zu verwenden.
Es genügt, ein HTML-Tag zu verwenden, um die Schaltfläche zu zentrieren. Dieses Tag hilft Ihnen, das Element in der Mitte der Seite auszurichten und es für den Besucher attraktiver zu machen.
Beispiel für die Verwendung dieses Tags:
Die Schaltfläche befindet sich nun unabhängig von der Größe des Browserfensters oder des Geräts, auf dem die Webseite angezeigt wird, in der Mitte der Seite.
Es ist wichtig zu beachten, dass die Verwendung eines Tags als veraltete Methode zum Zentrieren von Elementen angesehen wird und daher nicht für die Verwendung im modernen Webdesign empfohlen wird. Stattdessen lohnt es sich, CSS-Stile zu verwenden, um Elemente zu zentrieren, um ein flexibleres und kontrollierbareres Design zu ermöglichen.
Platzieren einer Schaltfläche in der Mitte der Seite in HTML
Erstellen Sie zunächst eine Tabelle, die aus einer Zeile und einer Zelle besteht:
Dann platzieren wir eine Schaltfläche in der Zelle:
Verwenden Sie CSS, um die Tabellen- und Zellstile festzulegen, um die gewünschte Zentrierung zu erreichen. Legen Sie für die Tabelle die Breite auf 100% und die Höhe auf 100 fest%:
Platzieren Sie nun die Tabellenzelle mithilfe der Ausrichtung in der Mitte der Seite:
Also haben wir eine Schaltfläche in der Mitte der Seite mit einer Tabelle platziert. Diese Methode ist einfach genug und eignet sich für die Platzierung eines einzelnen Elements. Wenn Sie mehrere Schaltflächen platzieren müssen, können Sie zusätzliche Tabellenzellen oder andere Zentrierungsmethoden wie Flexbox oder grid verwenden.
Methoden zum Zentrieren einer Schaltfläche auf einer Webseite
Es gibt mehrere Methoden, um eine Schaltfläche auf einer Webseite zu zentrieren. Betrachten wir einige von ihnen:
| Methode | Die Beschreibung |
|---|---|
| Verwenden von CSS | Mit der Eigenschaft text-align:center können Sie eine Schaltfläche innerhalb des Containers zentrieren. Dazu müssen Sie dem Container den Stil text-align:center und die Schaltfläche selbst display:inline-block festlegen. |
| Verwenden einer Tabelle | In einer Tabelle können Sie eine Schaltfläche innerhalb einer Zelle positionieren, sie wird automatisch zentriert. Dazu können Sie eine Tabelle mit einer Zeile und einer Zelle erstellen, in die Sie die Schaltfläche einfügen möchten. |
| Flexbox verwenden | Mit den Eigenschaften flex und justify-content:center Sie können einen Container erstellen, der den Inhalt automatisch horizontal zentriert. Dazu müssen Sie dem Container den Display:flex-Stil und der Schaltfläche selbst den Margin:auto-Stil zuweisen. |
Die Auswahl der Methode zum Zentrieren einer Schaltfläche auf einer Webseite hängt von den Anforderungen des Projekts und den Vorlieben des Entwicklers ab. Jede dieser Methoden hat ihre eigenen Vor- und Nachteile, daher ist es wichtig, sie unter Berücksichtigung des Kontexts und der Ziele des Projekts anzuwenden.
Verwenden von CSS zum Zentrieren einer Schaltfläche
Wenn Sie eine Schaltfläche auf einer Webseite zentrieren möchten, können Sie CSS verwenden, um das gewünschte Ergebnis zu erzielen. Hier sind einige Beispiele, wie dies möglich ist:
1. Verwenden der text-align-Eigenschaft mit dem Wert center im übergeordneten Element:
2. Verwenden der Margin-Eigenschaft mit dem automatischen Wert und der Blockanzeige eines Elements:
3. Verwenden der Flex-Eigenschaft mit dem Center-Wert im übergeordneten Element:
Mit all diesen Methoden können Sie eine Schaltfläche auf einer Webseite zentrieren, auswählen, was für Ihre Bedürfnisse und den Stil der vorherigen Elemente am besten geeignet ist.
Erstellen des horizontalen Mittelpunkts des vorherigen Beispiels
Um eine horizontale Zentrierung der Schaltfläche im vorherigen Beispiel zu erstellen, können wir flexbox verwenden. Zuerst müssen wir dem Button-Container die Eigenschaft "display: flex" und "justify-content: center" festlegen. Auf diese Weise wird die Schaltfläche auf der X-Achse (horizontal) zentriert.
Hier ist ein Beispielcode:
.container
Wenden Sie diese Klasse auf den Schaltflächencontainer an, und die Schaltfläche wird horizontal auf der Seite zentriert.
Anwenden einer relativen Positionierung, um einen Mittelpunkt auf einer Seite zu erstellen
Sie können die relative Positionierung verwenden, um eine Schaltfläche auf einer Seite zu zentrieren. Legen Sie dazu die position-Eigenschaft auf relative für das Element fest, das die Schaltfläche enthält.
Der Vorteil der relativen Positionierung besteht darin, dass der Platz, den das Element einnimmt, beibehalten wird, ohne andere Elemente auf der Seite zu überlappen.
Um eine Schaltfläche zu zentrieren, müssen Sie die entsprechenden Eigenschaften für die Schaltfläche festlegen. Zum Beispiel:
.buttonIn diesem Beispiel wird die relative Positionierung durch Festlegen der position-Eigenschaft auf relative festgelegt. Mit den Eigenschaften left und transform wird die Schaltfläche dann um 50% der Breite des übergeordneten Elements nach links verschoben und dann um die Hälfte ihrer Breite zurückgeschoben.
Auf diese Weise wird die Schaltfläche unabhängig von ihrer Größe und der Größe des übergeordneten Elements genau in der Mitte der Seite positioniert.
Verwenden einer Tabelle zum Zentrieren einer Schaltfläche
In diesem Beispiel wird eine Tabelle im Vollbildmodus angezeigt, und darin befindet sich eine Zelle, in der sich die Schaltfläche befindet. Mit Attributen align="center" und valign="middle" die Zelle wird horizontal und vertikal zentriert ausgerichtet.
Sie können Stile auch auf eine Tabelle und eine Schaltfläche anwenden, um ihr Aussehen an Ihre Bedürfnisse anzupassen.
