Kaedah: 1. Tambahkan gaya "display:flex" pada elemen div dan tetapkan elemen div kepada gaya susun atur yang fleksibel 2. Tambahkan "align-item:center;justify-content:center" gaya kepada elemen div Hanya tetapkan elemen butang dalam div untuk dipusatkan secara mendatar dan menegak.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara untuk memusatkan butang dalam div dalam css
Kita boleh menetapkan elemen div kepada susun atur yang fleksibel melalui paparan:flex; atribut, yang digunakan untuk Elemen div memberikan fleksibiliti yang paling. Sifat
align-item mentakrifkan penjajaran item fleksibel dalam arah paksi silang (paksi menegak) baris semasa bekas fleksibel.
kandungan justify digunakan untuk menetapkan atau mendapatkan semula penjajaran elemen kotak fleksibel dalam arah paksi utama (paksi mendatar).
Contoh adalah seperti berikut:
<!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>Hasil keluaran:
(Belajar perkongsian video: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk memusatkan butang dalam div dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
