CSS wird hauptsächlich verwendet, um der HTML-Webseite den besten Stil zu verleihen. Mithilfe von CSS können wir die Anordnung der Elemente auf der Seite festlegen.

Es gibt verschiedene Methoden, die Schaltfläche in der Mitte der Webseite auszurichten. Wir können die Buttons sowohl horizontal als auch vertikal ausrichten. Wir können die Schaltfläche mit den folgenden Methoden zentrieren:

Textausrichtung: Mitte– Durch Festlegen des Werts der text-align-Eigenschaft des übergeordneten div-Tags auf die Mitte.Rand: automatisch- Indem Sie den Wert der Margin-Eigenschaft auf „Auto“ setzen.Anzeige: Flex- Durch Festlegen des Werts der Anzeigeeigenschaft auf Flex und des Werts von Rechtfertigungsinhalt Eigentum zu Center .Anzeige: Raster- Durch Festlegen des Werts der Anzeigeeigenschaft auf das Raster.

Lassen Sie uns die oben genannten Methoden anhand einiger Abbildungen verstehen.

Beispiel

In diesem Beispiel verwenden wir die Textausrichtung Eigenschaft und legen Sie ihren Wert auf fest Center . Es kann entweder in einem Body-Tag oder im übergeordneten Div-Tag des Elements platziert werden.

Hier platzieren wir die Textausrichtung: Mitte; im übergeordneten div-Tag des Schaltflächenelements.

 Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me 

Ausgabe

Beispiel

In diesem Beispiel verwenden wir die Anzeige: Raster; Eigentum und Rand: Auto; Eigentum. Hier platzieren wir die Anzeige: Raster; im übergeordneten div-Tag des Schaltflächenelements.

CSS-Unterstreichungstext

Die Schaltfläche wird in der Mitte der horizontalen und vertikalen Positionen platziert.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> 

Ausgabe

Beispiel

Dies ist ein weiteres Beispiel für die Platzierung des Knopfes in der Mitte. In diesem Beispiel verwenden wir die Anzeige: Flex; Eigentum, rechtfertigen-Inhalt: Mitte; Eigentum und align-items: center; Eigentum.

Dieses Beispiel hilft uns, die Schaltfläche in der Mitte der horizontalen und vertikalen Positionen zu platzieren.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me 

Ausgabe