Beberapa kaedah pemusatan CSS yang biasa digunakan

Kaedah pemusatan CSS ialah salah satu teknologi yang sangat asas dalam penghasilan halaman web. Sama ada teks atau imej berpusat, ia boleh dicapai dengan kod CSS mudah. Di bawah, kami akan memperkenalkan beberapa kaedah pemusatan CSS yang biasa digunakan.

1. Pusatkan div

Untuk memusatkan div, kita boleh menggunakan kod CSS berikut:

div {
    width: 200px;
    height: 100px;
    margin: auto;
}

Antaranya, width dan height atribut Mewakili lebar dan ketinggian div. Atribut margin:auto boleh memusatkan div secara mendatar dan menegak.

2. Pusatkan imej

Untuk memusatkan imej, kita boleh menggunakan kod CSS berikut:

img {
    display: block;
    margin: auto;
}

Antaranya, atribut display:block boleh membuat imej secara automatik Balut garisan supaya ia berpusat. Atribut margin:auto boleh memusatkan imej secara mendatar dan menegak.

3. Pusatkan kotak teks

Untuk memusatkan kotak teks, kita boleh menggunakan kod CSS berikut:

input[type=text] {
    display: block;
    margin: 0 auto;
}

Di mana, input[type=text] mewakili kotak teks , atribut display:block boleh menjadikan kotak teks secara automatik membalut dan memusatkannya. Atribut margin:0 auto boleh memusatkan kotak teks secara mendatar dan menegak secara lalai.

4. Pusatkan keseluruhan halaman web

Untuk memusatkan keseluruhan halaman web, kita boleh menggunakan kod CSS berikut:

body {
    margin: 0 auto;
    text-align: center;
}

Antaranya, atribut margin:0 auto boleh pusat kandungan halaman web Berpusat secara mendatar, atribut text-align:center boleh memusatkan kandungan web secara menegak.

5. Pusatkan elemen berkedudukan mutlak

Untuk memusatkan elemen kedudukan mutlak, kita boleh menggunakan kod CSS berikut:

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

Di mana, position:absolute Atribut boleh letakkan elemen dalam elemen induk Atribut top:50% dan left:50% boleh memusatkan elemen ke atas, bawah, kiri dan kanan berbanding dengan elemen induk. Atribut transform:translate(-50%,-50%) boleh mengalihkan kedudukan elemen ke kiri atas dengan separuh daripada lebar dan tingginya, supaya elemen itu berpusat dengan sempurna.

Ringkasnya, kaedah di atas biasanya digunakan kaedah pemusatan CSS, tetapi dalam aplikasi sebenar, kaedah pemusatan yang sepadan harus dipilih mengikut situasi tertentu.

Atas ialah kandungan terperinci Beberapa kaedah pemusatan CSS yang biasa digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!