Bagaimanakah Saya Boleh Memusatkan Butang Secara Mendatar dan Menegak dalam Div Menggunakan CSS?

Memusatkan Butang dalam Div

Dalam CSS, terdapat beberapa teknik untuk memusatkan kandungan dalam elemen induk. Mari kita terokai pendekatan yang paling biasa untuk memusatkan butang secara mendatar dalam div.

Menggunakan Flexbox (Pendekatan Moden)

Flexbox ialah modul reka letak CSS yang menyediakan fleksibel dan responsif susun atur. Untuk memusatkan butang secara menegak dan mendatar menggunakan Flexbox:

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Menggunakan Lebar dan Margin Tetap (Pendekatan Warisan)

Jika butang mempunyai lebar tetap dan induk lebar div adalah tetap atau 100%, anda boleh menggunakan margin ke tengah ia:

button {
  margin: 0 auto;
}

Kaedah Alternatif untuk Pemusatan Mendatar

• Penjajaran teks: Tetapkan sifat penjajaran teks induk div ke "tengah."
• margin-kiri: Kira separuh lebar butang dan tetapkannya sebagai jidar negatif untuk sebelah kiri.

Pemusatan Menegak

Untuk memusatkan butang secara menegak, gunakan relatif kedudukan dan tetapkan harta teratas kepada 50%. Kemudian, tetapkan kedudukan: relatif pada butang itu sendiri:

button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Kod Contoh

Berikut ialah contoh kod HTML dan CSS untuk memusatkan butang dalam div:

<div>

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Ini akan memusatkan butang "Hello" secara mendatar dan menegak dalam induk div.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Butang Secara Mendatar dan Menegak dalam Div Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!