So zentrieren Sie die Schaltfläche in div in CSS-CSS-Tutorial-php.cn

So zentrieren Sie die Schaltfläche in div in CSS

WBOY

Freigeben： 2021-12-03 18:18:56

Original

10345 Leute haben es durchsucht

Methode: 1. Fügen Sie dem div-Element den Stil „display:flex“ hinzu und stellen Sie das div-Element auf einen flexiblen Layoutstil ein. 2. Fügen Sie dem div den Stil „align-items:center;justify-content:center“ hinzu Element und setzen Sie die Schaltfläche innerhalb des Div. Zentrieren Sie das Element einfach horizontal und vertikal.

So zentrieren Sie die Schaltfläche in div in CSS

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So zentrieren Sie eine Schaltfläche in einem Div in CSS

Wir können das div-Element über das Attribut display:flex; auf ein flexibles Layout einstellen, um maximale Flexibilität für das div-Element zu gewährleisten. Die Eigenschaft

align-items definiert die Ausrichtung von Flex-Elementen in Querrichtung (vertikale Achse) der aktuellen Zeile des Flex-Containers.

justify-content wird verwendet, um die Ausrichtung des Flexbox-Elements in Richtung der Hauptachse (horizontale Achse) festzulegen oder abzurufen.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width:200px;
        height:200px;
        border:1px solid #000;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    </style>
</head>
<body>
    <div><button>按钮</button></div>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

So zentrieren Sie die Schaltfläche in div in CSS

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die Schaltfläche in div in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!