Zentrieren Sie eine Schaltfläche in CSS
- Zentrieren Sie eine Schaltfläche vertikal und horizontal
- Verschiedene Methoden zum Zentrieren einer Schaltfläche
-
Einen Button zentrieren Mit
text-align: center -
Einen Button zentrieren Mit
display: gridundmargin: auto -
Einen Button zentrieren Mit
display: flex -
Zentrieren eines Buttons mit
position: fixed - Zentrieren Sie zwei oder mehr Schaltflächen
- Abschluss
Das filigranste Styling für eine HTML-Webseite wird in erster Linie über CSS erreicht. Die Anordnung der Komponenten auf der Webseite kann mit CSS gesteuert werden.
Es gibt verschiedene Methoden, um eine Schaltfläche in der Mitte einer Webseite auszurichten. Die Ausrichtung des Tasters kann wahlweise horizontal oder vertikal angebracht werden.
Zentrieren Sie eine Schaltfläche vertikal und horizontal
Wir verwenden in diesem Beispiel die Positionierung und die Eigenschaft transform, um das Element button vertikal und horizontal zu zentrieren:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 200px;
position: relative;
border: 2px solid blue;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<button>Button at the Center</button>
</div>
</div>
</body>
</html>
Hier haben wir die Ansicht des Buttons innerhalb eines Containers so eingerichtet, dass die zentrierte Ausrichtung klar erkennbar ist.
Verschiedene Methoden zum Zentrieren einer Schaltfläche
Eine Schaltfläche kann mit den folgenden Methoden zentriert werden:
text-align: center– Geben Sie den Wert dertext-align-Eigenschaft des übergeordnetendiv-Tags alscenterein.margin: auto- Geben Sie den Wert der Eigenschaftmarginaufautoein.display: flex– Geben Sie den Wert der Eigenschaftdisplayaufflexund setzen Sie den Wert der Eigenschaftjustify-contentaufcenter.display: grid- Geben Sie den Wert der Eigenschaftdisplayalsgridein.
Es gibt weitere andere Methoden, die zum Zentrieren einer Schaltfläche verwendet werden können.
Einen Button zentrieren Mit text-align: center
Wir verwenden die Eigenschaft text-align und setzen ihren Wert im folgenden Beispiel auf center. Dies kann innerhalb des body-Tags oder des übergeordneten div-Tags des Elements platziert werden.
Platzieren des text-align: center im übergeordneten div-Tag des button-Elements:
<!DOCTYPE html>
<html>
<head>
<style>
.container{
text-align: center;
border: 2px solid blue;
width: 300px;
height: 200px;
padding-top: 100px;
}
#bttn{
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<button id ="bttn"> Button at the Center </button>
</div>
</body>
</html>
Platzieren des text-align: center innerhalb des body-Tags:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<button>Button at the Center</button>
</body>
</html>
Wenn nötig, verschieben Sie den Button genau in die Mitte der Seite, die Eigenschaft padding-top sollte verwendet werden, aber dies ist nicht die beste Methode, um einen Button zu zentrieren.
Einen Button zentrieren Mit display: grid und margin: auto
Hier verwenden wir die Eigenschaft display: grid und die Eigenschaft margin: auto in CSS. Im folgenden Beispiel wird das display: grid im übergeordneten div-Tag des button-Elements platziert:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
border: 2px solid blue;
display: grid;
}
button {
background-color: lightpink;
color: black;
font-size: 18px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<button>Button at the Center</button>
</div>
</body>
</html>
Hier wird die Schaltfläche in der Mitte der vertikalen und horizontalen Position platziert.
Innerhalb des Containers wird die Property display mit dem Wert grid verwendet. Daher wirkt es sich auf den Container aus, während die Eigenschaft margin als auto im Element button verwendet wird, was sich auf die Schaltfläche auswirkt.
Diese beiden Eigenschaften spielen eine wesentliche Rolle bei der Zentrierung eines Buttons.
Einen Button zentrieren Mit display: flex
Dies ist die am häufigsten verwendete Methode zum Ausrichten einer Schaltfläche in der Mitte. Hier sind drei Eigenschaften: display: flex;, justify-content: center; und align-items: center;, die beim Zentrieren einer Schaltfläche eine wesentliche Rolle spielen.
Dieses Beispiel zeigt die Ausrichtung der Schaltfläche in der Mitte der vertikalen und horizontalen Position.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
border: 2px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
button {
background-color: lightpink;
color: black;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<button>Button at the Center</button>
</div>
</body>
</html>
Zentrieren eines Buttons mit position: fixed
Wir geben einen 50%-Rand von der linken Seite der Seite und stellen dann die Position: fest ein, die im folgenden Beispiel nur die Position in der Mitte des Körpers einnimmt:
<!DOCTYPE html>
<html>
<head>
<style>
button {
position: fixed;
left: 50%;
}
</style>
</head>
<body>
<div class="button-container-div">
<button>Button at the Center</button>
</div>
</body>
</html>
Hier bezieht sich die Schaltfläche nicht auf die Mitte der gesamten Webseite.
Zentrieren Sie zwei oder mehr Schaltflächen
Wenn es zwei oder mehr Schaltflächen gibt, können wir alle diese Schaltflächen in ein div-Element packen und dann die Flexbox-Eigenschaft verwenden, um die Schaltflächen in der Mitte auszurichten. Wenn zwei Schaltflächen als ein div-Element betrachtet werden, werden alle Eigenschaften auf beide angewendet.
Zum Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-box {
display: flex;
}
.jc-center {
justify-content: center;
}
button.margin-right {
margin-right: 20px;
}
</style>
</head>
<body>
<div class="flex-box jc-center">
<button type="submit" class="margin-right">Select</button>
<button type="submit">Submit</button>
</div>
</body>
</html>
Alternativ können wir sowohl Inline-Block- als auch Blockelemente mit Flexbox gemäß dem folgenden Beispiel zentrieren:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-box {
display: flex;
}
.jc-center {
justify-content: center;
}
</style>
</head>
<body>
<div class="flex-box jc-center">
<button type="submit">Select</button>
</div>
<br>
<div class="flex-box jc-center">
<button type="submit">Submit</button>
</div>
</body>
</html>
Abschluss
Es gibt zahlreiche Methoden, um eine Schaltfläche mit verschiedenen Eigenschaften in CSS und HTML zu zentrieren. Wie oben erwähnt, können verschiedene Ansätze verwendet werden, um eine Schaltfläche oder Schaltflächen auf einfache Weise in einer Webseite zu zentrieren, indem die verschiedenen Eigenschaften von CSS zusammen mit HTML verwendet werden.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.