Tasten - dies ist eines der beliebtesten Elemente der Website-Benutzeroberfläche. Sie ermöglichen es Besuchern, mit Inhalten zu interagieren und verschiedene Aktionen auszuführen. Sie werden jedoch nicht immer perfekt auf der Seite angezeigt - manchmal ragen sie aus dem Gesamtlayout heraus oder sind nicht zentriert.
In diesem Artikel betrachten wir eine einfache Möglichkeit, eine Schaltfläche in der Mitte einer Seite zu platzieren, ohne komplexe CSS-Stile zu verwenden. Dafür benötigen wir nur ein paar Zeilen Code.
Zuerst müssen wir ein Schaltflächenelement mit einem HTML-Tag erstellen . Innerhalb dieses Tags können wir Text oder ein Bild hinzufügen, das auf der Schaltfläche angezeigt wird. Dann erstellen wir einen Container für die Schaltfläche mit einem HTML-Tag .
In wir fügen Stil hinzu text-align: center;. Mit diesem Stil können Sie den Inhalt innerhalb des Containers zentriert ausrichten. Auf diese Weise befindet sich unsere Schaltfläche in der Mitte der Seite.
Der einfache Weg besteht darin, den Knopf zentriert zu machen
Um eine Schaltfläche in HTML zentriert zu machen, können Sie eine einfache Methode mit CSS verwenden. Im folgenden Beispielcode wird gezeigt:
-
Erstellen Sie eine Schaltfläche mit einem Tag . Fügen Sie beispielsweise einen solchen Code hinzu:
.center-button
Die Schaltfläche wird nun in der Mitte angezeigt. Mit der Eigenschaft "display: block" machen wir die Schaltfläche zu einem Blockelement, und mit der Eigenschaft "margin: 0 auto" richten wir die Schaltfläche horizontal in der Mitte aus.
Die Schaltfläche kann mit CSS ausgerichtet werden
Damit die Schaltfläche zentriert ist, muss für das übergeordnete Element ein Stil mit text-align: center festgelegt werden. Sie können beispielsweise den folgenden Code für eine Tabelle verwenden:
Auf diese Weise wird die Schaltfläche an der Mitte des übergeordneten Elements ausgerichtet, in diesem Fall an den Tabellenzellen.
Komplexere Ausrichtungen können mit einer Kombination von CSS-Eigenschaften und -Werten wie Margin, Padding usw. implementiert werden. Dies hängt von den Anforderungen und dem Design des jeweiligen Projekts ab.
Wir verwenden Margin: Auto
Um diese Methode anzuwenden, legen Sie einfach die Breite des Elements fest und legen Sie den Rand links und rechts auf gleich fest auto. Zum Beispiel:
Daher wird eine Schaltfläche mit der "button" -Klasse unabhängig von ihrer Größe und ihrem Inhalt in der Mitte der Webseite platziert.
Sie können auch ein verkürztes Aufzeichnungsformular verwenden:
.buttonDiese Methode eignet sich zum Zentrieren von Schaltflächen, Textblöcken und anderen Elementen auf einer Webseite. Es erfordert keine komplexen Berechnungen und ermöglicht es Ihnen, das gewünschte Ergebnis mit minimalem Aufwand zu erzielen.
Wir verwenden Positionierung: absolute
Wenn Sie die Schaltfläche in der Mitte der Seite platzieren müssen, können Sie die Positionierung mit der CSS-Eigenschaft "absolute" verwenden. Mit dieser Methode können Sie die Position eines Elements auf der Seite unabhängig von der Position anderer Elemente genau festlegen.
Hier ist ein Codebeispiel, um eine Schaltfläche in der Mitte der Seite zu erstellen:
.center-button In diesem Beispiel erstellen wir eine "center-button" -Klasse, die auf den Umschlag einer Schaltfläche angewendet wird. Dann verwenden wir die Eigenschaft "position: absolute", um die Position des Elements festzulegen.
Die Eigenschaften "top: 50%" und "left: 50%" legen die horizontale und vertikale Position des Elements relativ zum übergeordneten Element fest.
Um die Schaltfläche in der Mitte auszurichten, verwenden wir die Eigenschaft "transform" mit der Funktion "translate(-50%, -50%)". Es verschiebt das Element um die Hälfte seiner Breite und Höhe, um es genau in der Mitte zu zentrieren.
Ihre Schaltfläche wird nun in der Mitte der Seite platziert und bleibt an dieser Stelle, auch wenn Sie die Größe des Browserfensters ändern.
Die Schaltfläche kann mit der Flexbox zentriert werden
Um eine Schaltfläche mit Flexbox zu zentrieren, müssen Sie einen übergeordneten Container mit bestimmten Eigenschaften erstellen:
- display: flex; - legt den Flex-Typ des Containers fest
- justify-content: center; - richtet den Inhalt des Containers horizontal in der Mitte aus
- align-items: center; - richtet den Inhalt des Containers vertikal in der Mitte aus
Hier ist ein Codebeispiel zum Erstellen einer zentrierten Schaltfläche:
.container In diesem Beispiel wird die Schaltfläche automatisch horizontal und vertikal innerhalb des übergeordneten Containers mit der Container-Klasse zentriert.
Mit Flexbox können Sie leicht zentrierte Elemente erstellen, was es zu einem praktischen Werkzeug macht, um effiziente und moderne Weboberflächen zu erstellen.
Verwenden Sie die Tabelle, um die Schaltfläche zu zentrieren
Wenn Sie eine Schaltfläche in der Mitte einer Seite oder eines Blocks platzieren möchten, können Sie eine Tabelle verwenden. Erstellen Sie dazu eine Tabelle mit einer einzelnen Zelle und platzieren Sie eine Schaltfläche in dieser Zelle. Wenn Sie dann die Zelle zentriert ausrichten, wird die Schaltfläche zentriert.
Im obigen Beispiel nimmt die Tabelle 100% der Breite und Höhe des übergeordneten Containers ein, um den gesamten verfügbaren Bereich zu belegen. Die Zelle mit der Schaltfläche wird horizontal und vertikal zentriert ausgerichtet. Auf diese Weise wird die Schaltfläche in der Mitte des Bildschirms oder Blocks positioniert.
Obwohl die Verwendung einer Tabelle zum Zentrieren möglicherweise nicht der modernste Ansatz ist, ist es in einigen Fällen eine einfache und effektive Lösung. Darüber hinaus werden Tabellen im HTML-Markup immer noch häufig verwendet, z. B. um Tabellendaten anzuzeigen.
Verwenden Sie Gitter, um die Schaltfläche zu zentrieren
Gitter sind ein Raster, das aus Zeilen und Spalten besteht. Jedes Seitenelement kann in der gewünschten Rasterzelle platziert werden. Durch die Verwendung von Grids können Elemente auf einer Seite, einschließlich Schaltflächen, leicht zentriert werden.
Um eine Schaltfläche zu erstellen, die mit Grids zentriert ist, müssen Sie eine Containertabelle mit einer Spalte und einer Zeile erstellen. Im Inneren des Containers befindet sich eine Schaltfläche, die zentriert werden soll.
Mit der Center-Klasse können Sie Stile hinzufügen, um die Schaltfläche zu zentrieren. Sie können beispielsweise die Eigenschaft "text-align" mit dem Wert "center" verwenden.
Als Ergebnis dieser Platzierung wird die Schaltfläche horizontal in der Tabellenzelle zentriert.
Mit den flexiblen Grids können Sie die Schaltfläche nicht nur horizontal, sondern auch vertikal zentrieren. Dazu können Sie zusätzliche CSS-Eigenschaften wie "align-items" und "justify-content" verwenden und den Wert "center" festlegen.
Fazit: Wählen Sie die am besten geeignete Methode aus
Wie Sie in den vorherigen Beispielen sehen können, gibt es mehrere Möglichkeiten, eine Schaltfläche in der Mitte der Seite zu platzieren. Die Auswahl einer bestimmten Methode sollte auf Projektanforderungen und Benutzererfahrung basieren.
Wenn eine einzelne Schaltfläche zentriert werden muss, kann eine einfache Methode mit den CSS-Eigenschaften margin und text-align ausreichen.
Wenn Sie jedoch ein komplexeres Schaltflächenlayout erstellen oder die Positionierung flexibel anpassen möchten, ist die Verwendung einer Tabelle möglicherweise die bevorzugte Lösung. In diesem Fall können die Schaltflächen in einer Zeile oder Spalte angeordnet sein und einen einheitlichen oder unterschiedlichen Abstand zwischen ihnen haben.
Am Ende hängt die Wahl der Zentrierungsmethode für die Schaltfläche von den projektspezifischen Eigenschaften und der erforderlichen Benutzererfahrung ab. Wählen Sie die Methode aus, die Ihren Bedürfnissen am effektivsten entspricht.
- Einfaches Zentrieren mit den CSS-Eigenschaften margin und text-align .
- Verwenden Sie eine Tabelle für ein komplexeres Tastenlayout.
