Cara menggunakan CSS untuk mencapai susun atur berpusat (kod kod)

Dalam reka bentuk web, pemusatan ialah kaedah reka letak yang sangat biasa. Banyak reka bentuk web kini menggunakan reka letak berpusat untuk memberikan pengguna pengalaman yang lebih baik, dan pelaksanaan berpusat CSS juga sangat mudah dan penting.

Mari bincangkan cara menggunakan kod CSS untuk mencapai reka letak berpusat dalam pembangunan bahagian hadapan.

Konsep asas pemusatan

Sebelum anda mula mempelajari kod CSS berpusat, anda perlu memahami beberapa konsep asas terlebih dahulu.

1. Pemusatan mendatar: Arah mendatar ialah penjajaran tengah, biasanya digunakan apabila lebar elemen halaman tidak 100%, seperti kotak teks, butang, dsb.
2. Pemusatan menegak: Arah menegak ialah penjajaran tengah, biasanya digunakan apabila ketinggian elemen halaman tidak 100%, seperti teks baris tunggal, gambar, dsb.
3. Pemusatan mendatar dan menegak: Penjajaran tengah secara mendatar dan menegak pada masa yang sama.

Pemusatan mendatar

Terdapat banyak cara untuk mencapai reka letak pemusatan mendatar, tetapi intipatinya adalah untuk menyamakan jidar kiri dan kanan elemen.

1. text-align

Ini ialah kaedah yang paling biasa digunakan, sesuai apabila elemen induk ialah elemen peringkat blok (seperti a div) dan ialah Tetapkan sifat pada elemen sebaris (seperti teks).

父元素 {
    text-align: center;
}
子元素 {
    display: inline-block;
}

Kaedah ini memerlukan penetapan elemen anak kepada inline-block untuk mencapai penjajaran, jika tidak, ia hanya boleh dicapai menggunakan kaedah margin.

2. margin

Kaedah ini juga biasa digunakan, dan sesuai apabila kedua-dua elemen induk dan elemen anak adalah elemen peringkat blok, dan lebar elemen kanak-kanak ditetapkan. Dengan menetapkan jidar kiri dan kanan kepada auto, jadikan jidar pada kedua-dua belah sama dan tengah elemen.

父元素 {
    width: 60%;
}
子元素 {
    width: 80%;
    margin: 0 auto;
}

Perhatikan bahawa kaedah reka letak ini memerlukan elemen induk untuk menetapkan lebar, jika tidak elemen anak tidak boleh diselaraskan.

3. flex

Jika reka letak anda menggunakan flexbox, maka anda boleh menggunakan kod CSS berikut untuk memusatkan elemen secara mendatar.

父元素 {
    display: flex;
    justify-content: center;
}

Kod di atas akan memusatkan elemen anak dalam arah paksi-x.

4. grid

Jika menggunakan reka letak grid, anda boleh menggunakan gaya CSS berikut untuk menjajarkan elemen secara mendatar. Atribut

父元素 {
    display: grid;
    place-items: center;
}

place-items boleh menjajarkan elemen anak secara mendatar dan menegak, seperti yang anda boleh lihat dalam ringkasan di bawah.

Pemusatan Menegak

Terdapat juga banyak cara untuk melaksanakan reka letak berpusat menegak Berikut ialah beberapa kaedah.

1. tinggi garis

Ini ialah kaedah yang sangat mudah dan biasa yang berfungsi dengan baik untuk satu baris teks dan imej. Penjajaran menegak boleh dicapai dengan menetapkan nilai ketinggian garis yang sama kepada elemen induk dan elemen anak.

父元素 {
    line-height: 100px;
}
子元素 {
    line-height: 100px;
}

Perlu diperhatikan di sini bahawa ketinggian unsur induk mestilah gandaan integer unsur anak.

2. mutlak

Kaedah ini menetapkan atribut kedudukan elemen anak kepada mutlak, dan kemudian menggunakan atas dan bawah untuk menjajarkannya.

父元素 {
    position: relative;
    height: 200px;
}
子元素 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Kaedah ini sesuai untuk kes di mana ketinggian bekas ditetapkan dan ketinggian elemen kanak-kanak tidak diketahui.

3. flex

Kaedah ini memerlukan penggunaan susun atur kotak flex bagi bekas, dan kemudian menggunakan atribut align-items dan justify-content secara menegak dan Jajar secara mendatar dan tengah.

父元素 {
    display: flex;
    align-items: center;
    justify-content: center;
}

Kod di atas akan memusatkan elemen anak dalam arah paksi-y.

Pemusatan mendatar dan menegak

Jika anda ingin menjajarkan elemen secara mendatar dan menegak, anda boleh menggabungkan lebih daripada dua kaedah untuk mencapainya.

Kod berikut akan mencapai reka letak berpusat mendatar dan menegak:

父元素 {
    display: flex;
    align-items: center;
    justify-content: center;
}

Kod di atas akan memusatkan elemen anak pada paksi koordinat x dan y.

Ringkasan

Dalam reka bentuk bahagian hadapan, mencapai reka letak berpusat adalah bahagian yang sangat penting. Semoga artikel ini membantu anda lebih memahami cara kod berpusat dilaksanakan. Menggunakan kaedah seperti penjajaran teks, jidar, lentur, grid dan mutlak, elemen boleh diselaraskan dan dipusatkan dalam kedua-dua arah mendatar dan menegak. Dengan bantuan kaedah dan sifat ini, anda boleh membuat halaman web dengan mudah dengan reka bentuk UI yang baik.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencapai susun atur berpusat (kod kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!