Mengapa Margin: Auto Tidak Sentiasa Memusatkan Elemen Kedudukan?

Margin:auto Tidak Cukup untuk Memusatkan Elemen Kedudukan

Apabila cuba mendatar melintang elemen kedudukan mutlak atau tetap, margin: sifat auto sahaja mungkin tidak mencukupi.

Untuk elemen dalam aliran (elemen tanpa kedudukan: mutlak atau tetap), tetapan lebar sahaja sudah memadai. Margin: auto akan mengimbangi jidar kiri dan kanan secara automatik untuk memusatkan elemen.

Walau bagaimanapun, untuk elemen diposisikan, situasinya berbeza. Mengikut spesifikasi CSS:

• Jika kiri, kanan dan lebar semuanya automatik, jidar-kiri dan jidar-kanan ditetapkan kepada 0, menyebabkan tiada pemusatan.
• Jika kiri, kanan dan lebar bukan semuanya automatik, jidar-kiri dan jidar-kanan ditetapkan kepada nilai yang sama, yang menghasilkan pemusatan.

Untuk memusatkan elemen kedudukan:

1. Tetapkan kiri, kanan dan lebar

position: absolute;
left: 0;
right: 0;
width: 70px;

2. Tetapkan jidar kiri dan jidar kanan kepada auto (pilihan)

position: absolute;
left: 0;
right: 0;
width: 70px;
margin-left: auto;
margin-right: auto;

Menetapkan kiri dan kanan kepada 0 pada asasnya mentakrifkan sempadan kiri dan kanan di mana elemen boleh bergerak. Margin: auto kemudian mengimbangi ruang antara sempadan ini.

Contoh:

Pertimbangkan elemen induk dengan lebar 200px dan elemen anak yang diposisikan secara mutlak dengan lebar 70px:

parent {
  width: 200px;
  position: relative;
}
child {
  position: absolute;
  left: 0;
  right: 0;
  width: 70px;
  margin: auto; /* Optional */
}

Apabila margin: auto digunakan, elemen anak dipusatkan secara mendatar berkenaan dengan induk. Ini kerana margin yang dikira (margin-kiri dan margin-kanan) adalah sama, yang secara berkesan meletakkan kanak-kanak di tengah-tengah ruang yang tersedia.

Atas ialah kandungan terperinci Mengapa Margin: Auto Tidak Sentiasa Memusatkan Elemen Kedudukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!