So zentrieren Sie eine Taste innerhalb eines DIV mit CSS

Schaltflächen sind eine Notwendigkeit von Webanwendungen. Sie sind von Vorteil, um die verschiedenen Funktionen auszulösen oder wichtige Maßnahmen auszuführen. Wenn jedoch Schaltflächen positioniert sind, an denen niemand sie sehen kann oder sich stört, um sie zu klicken, sind sie völlig nutzlos. Um solche Dinge zu vermeiden, können wir unsere Schaltflächen in die Mitte platzieren, um sie für die Benutzer sichtbarer zu machen.

In diesem Artikel wird zeigen, wie das Tastenelement innerhalb eines DIV mit CSS zentriert werden kann.

So zentrieren Sie eine Taste innerhalb eines DIV mit CSS?

In CSS werden wir die folgenden Eigenschaften verwenden, um die Taste in einem DIV zu zentrieren:

• Eigenschaft anzeigen
• Positionseigenschaft

Lassen Sie uns also jeweils auf jeden einzeln ausarbeiten!

Methode 1: Mitte eine Taste innerhalb der DIV mithilfe der CSS -Anzeigeeigenschaft

Um zu kontrollieren, wie sich ein ausgewähltes HTML -Element verhalten wird, das “AnzeigeEigenschaft wird verwendet. Diese Eigenschaft ist hilfreich, um Elemente flexibel zu machen, um sie an einem bestimmten Ort festzulegen, z.

Nehmen wir ein Beispiel, um die Arbeit der Anzeigeeigenschaft zu bestätigen, um die Schaltfläche innerhalb des DIV -Elements zu zentrieren.

Beispiel

Hier haben wir eine Schaltfläche im Container auf unserer Webseite. Positionieren wir es also in der Mitte:

In unserer HTML -Datei haben wir eine Schaltfläche mit der “angegebenTag und deklarierte es in die ““. Geben Sie nun die DIV innerhalb der Tags an.

Html

Mein Knopf

In der CSS -Datei werden wir das verwendenGrenze”Eigenschaft mit dem Wert“Solid 1.5px”, Wo fest ist der Typ und 1.5px ist die Breite der Grenze. Weisen Sie Div nun eine entsprechende Höhe mit dem “zu"Höhe”Eigentum wie“7rem”. Der "Anzeige"Eigenschaft wird mit dem Wert verwendet"biegen”Um den definierten Teil flexibel zu machen.

Im nächsten Schritt werden wir die Taste auf horizontal und vertikal mit dem Wert ausrichtenCenter”Für die“Rechtfertigungsbekämpfung" Und "Ausrichtung" Eigenschaften.

CSS

div
Grenze: Solid 1.5px;
Höhe: 7REM;
Anzeige: Flex;
Justify-Content: Center;
Ausrichtung: Zentrum;

Speichern Sie den Code und führen Sie die HTML -Datei in Ihrem Browser aus:

Wie Sie sehen können, haben wir mit CSS -Eigenschaften einen Knopf in einem DIV erfolgreich zentriert.

Methode 2: Mitte eine Taste innerhalb der DIV mithilfe der CSS -Position Eigenschaft

Der "PositionDie Eigenschaft wird verwendet, um HTML -Elemente an einer bestimmten Position zu platzieren. Die Kombination dieser Eigenschaft mit anderen CSS -Eigenschaften hilft dabei, die gewünschten Ergebnisse anmutig zu erzielen.

Beispiel

Im DIV -Element werden wir den Wert der “nehmen“TextausrichtungEigentum als "Center”Um den Knopf horizontal in der Mitte zu platzieren. Geben Sie für das Schaltflächenelement die “an"Position”Eigenschaft mit dem Wert“relativ”; Dadurch wird das Tasteelement relativ von seiner Standardposition positioniert. Als nächstes werden wir die "festlegen"Spitze"Eigentumswert zu"40%”Um die Taste in der Mitte vertikal auszurichten.

CSS

div
Grenze: Solid 1.5px;
Höhe: 7REM;
Text-Align: Mitte;

Taste
Position: Relativ;
Top: 40%;

Ausgang

Wir haben die einfachsten Methoden erklärt, um einen Knopf in einem DIV mit CSS zu zentrieren.

Abschluss

Um einen Knopf in einem Div zu zentrieren, das “Anzeige" oder "PositionImmobilien werden genutzt. Die Anzeigeeigenschaft wird mit der Kombination anderer Eigenschaften wie Ausrichtungsgegenstände und Justify-Inhaltsbekämpfung verwendet, um das Tastenelement zu zentrieren. Darüber hinaus wird die Positionseigenschaft mit Text-Align und Top-Eigenschaft verwendet, um das gewünschte Ergebnis zu erzielen. In diesem Artikel haben wir erklärt, wie ein Tastenelement innerhalb eines DIV mit CSS zentriert werden kann.