Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So zentrieren Sie die Schaltfläche in div in CSS

WBOY
Freigeben: 2021-12-03 18:18:56
Original
10360 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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage