pusat css

Memusatkan CSS: Panduan Lengkap

Salah satu masalah paling biasa yang dihadapi oleh pereka web atau pembangun bahagian hadapan semasa membuat halaman web ialah cara memusatkan elemen. Elemen boleh berupa teks, imej, video, butang, dsb. Dalam artikel ini, kami akan membincangkan cara untuk memusatkan pelbagai jenis elemen menggunakan CSS, termasuk memusatkan secara mendatar, memusatkan secara menegak dan memusatkan elemen induk.

1. Berpusat secara mendatar

Pertama, mari kita bincangkan cara memusatkan elemen secara mendatar, yang boleh dicapai melalui kaedah berikut:

1.1 teks- align atribut

Jika elemen ialah elemen peringkat blok, anda boleh menggunakan atribut penjajaran teks untuk memusatkan teks atau elemen sebaris secara mendatar. Sifat ini sering digunakan untuk memusatkan bar navigasi, tajuk dan perenggan.

Contohnya:

.container {
   text-align: center;
}

1.2 sifat margin

Cara lain untuk memusatkan elemen secara mendatar ialah menggunakan sifat margin. Anda boleh menetapkan margin kiri dan kanan elemen kepada auto.

Contohnya:

.container {
   width: 300px;
   margin: 0 auto;
}

1.3 susun atur flexbox

Flexbox ialah model reka letak CSS berkuasa yang menjadikan pemusatan mendatar dan menegak sangat mudah. Untuk pemusatan mendatar, gunakan CSS berikut:

.container {
   display: flex;
   justify-content: center;
}

Ini akan menjadikan elemen bekas sebagai bekas Flexbox dan memusatkan anak-anaknya secara mendatar.

2. Berpusatkan Menegak

Sekarang, mari kita lihat cara untuk memusatkan elemen secara menegak. Ini sedikit lebih sukar daripada memusatkan secara mendatar, tetapi terdapat beberapa cara untuk mencapainya.

2.1 Ketinggian Baris

Dalam sesetengah kes, atribut ketinggian baris boleh digunakan untuk memusatkan teks atau elemen sebaris secara menegak.

Contohnya:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}

span {
    font-size: 24px;
    line-height: 300px;
}

Tetapkan ketinggian garisan supaya konsisten dengan ketinggian bekas supaya satu baris teks berpusat secara menegak.

2.2 mengubah atribut

Atribut transformasi boleh digunakan untuk meletakkan elemen relatif kepada dirinya sendiri. Menetapkannya kepada translate() dan menetapkan nilai Y kepada 50% akan memusatkan elemen secara menegak.

.container {
    position: relative;
}

img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

2.3 Reka Letak Flexbox

Untuk elemen ketinggian tetap, anda boleh menggunakan reka letak Flexbox untuk memusatkannya secara menegak. Tetapkan item penjajaran sama dengan tengah untuk memusatkan elemen secara menegak.

.container {
    display: flex;
    align-items: center;
    height: 300px;
}

3. Pusat dalam elemen induk

Akhir sekali, mari kita bincangkan cara memusatkan elemen anak dalam elemen induk.

3.1 Kedudukan mutlak dan atribut jidar

Tetapkan elemen anak kepada kedudukan mutlak, kemudian tetapkan jidar kiri, kanan, atas dan bawah kepada 0 dan gunakan kata kunci auto untuk menjadikan elemen anak dalam Berpusat dalam elemen induk.

.parent {
    position: relative;
    height: 300px;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Pendekatan lain ialah menetapkan jidar kiri dan kanan elemen anak kepada auto. Dalam kes ini, elemen anak mestilah elemen peringkat blok.

.parent {
    height: 300px;
}

.child {
    width: 200px;
    height: 100px;
    margin: 0 auto;
}

3.2 Reka Letak Flexbox

Menggunakan reka letak Flexbox, adalah sangat mudah untuk memusatkan elemen anak dalam elemen induk. Tetapkan sifat paparan elemen induk kepada fleksibel, kemudian gunakan sifat justify-content dan align-item.

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

Ringkasan

Memusatkan CSS adalah penting untuk mencipta antara muka pengguna yang cantik dan mudah digunakan. Dalam artikel ini, kami telah membincangkan beberapa cara untuk memusatkan jenis elemen yang berbeza, termasuk menegak, mendatar dan pusat memusatkan teks, imej, video, butang dan elemen induk. Ingat, menggunakan pemusatan yang betul menjadikan reka bentuk web lebih baik dan lebih cekap.

Atas ialah kandungan terperinci pusat css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!