css set div berpusat

Dalam reka bentuk web, selalunya perlu untuk memusatkan elemen. Antaranya, yang paling biasa ialah memusatkan elemen div. CSS (Cascading Style Sheets) ialah bahasa yang digunakan dalam reka bentuk web yang memudahkan untuk melaksanakan reka letak berpusat. Di bawah, mari perkenalkan beberapa cara untuk menetapkan div berpusat dalam CSS.

1 Gunakan atribut margin

Pertama, anda boleh menggunakan atribut margin untuk memusatkan elemen div secara mendatar. Untuk elemen div lebar tetap, pemusatan mendatar boleh dicapai dengan menetapkan margin kiri dan kanan kepada auto. Kodnya adalah seperti berikut:

div {
    width: 200px;
    margin: 0 auto;
}

Dengan cara ini, elemen div akan dipusatkan secara mendatar pada halaman. Ambil perhatian bahawa kaedah ini hanya berfungsi untuk elemen lebar tetap.

2. Gunakan atribut penjajaran teks

Selain atribut margin, anda juga boleh menggunakan atribut penjajaran teks untuk memusatkan elemen div. Untuk kandungan dalam elemen div, anda boleh menggunakan atribut penjajaran teks untuk memusatkan kandungan secara mendatar. Kodnya adalah seperti berikut:

div {
    text-align: center;
}

Dengan cara ini, semua kandungan di dalam elemen div akan dipusatkan secara mendatar. Perlu diingatkan bahawa kaedah ini hanya berfungsi apabila lebar elemen dalam lebih kecil daripada lebar elemen div.

3 Gunakan atribut paparan dan penjajaran teks

Jika anda ingin mencapai pemusatan mendatar dan menegak elemen div pada masa yang sama, anda boleh menggunakan atribut paparan dan penjajaran teks. Khususnya, anda boleh menetapkan sifat paparan elemen div kepada blok sebaris, kemudian gunakan sifat penjajaran teks untuk memusatkannya secara mendatar, dan kemudian gunakan sifat penjajaran menegak untuk memusatkannya secara menegak. Kodnya adalah seperti berikut:

div {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

Dengan cara ini, elemen div akan dipusatkan secara mendatar dan menegak pada halaman. Perlu diingatkan bahawa kaedah ini hanya berfungsi apabila ketinggian elemen induk lebih besar daripada ketinggian elemen anak.

4. Gunakan reka letak flexbox

Cara lain untuk mencapai pemusatan mendatar dan menegak bagi elemen div ialah menggunakan reka letak flexbox. Flexbox ialah mod susun atur baharu yang boleh mencapai pelbagai kesan reka letak dengan mudah. Berikut ialah contoh kod yang menggunakan reka letak flexbox untuk melaksanakan div berpusat:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container div {
    /* div 元素样式 */
}

Dalam kod di atas, mula-mula tetapkan atribut paparan bekas luar kepada flex, dan kemudian gunakan justify-content dan align- atribut item masing-masing Kandungannya dipusatkan secara mendatar dan menegak. Perlu diingatkan bahawa kaedah ini memerlukan pelayar untuk menyokong susun atur flexbox.

Untuk meringkaskan, kaedah di atas menggunakan margin, penjajaran teks, paparan dan reka letak kotak flex untuk mencapai pemusatan elemen div. Dalam aplikasi praktikal, kaedah yang berbeza boleh dipilih mengikut situasi tertentu. Pada masa yang sama, untuk serasi dengan penyemak imbas dan peranti yang berbeza, adalah disyorkan untuk menggunakan teknologi seperti pertanyaan media untuk reka letak responsif dalam projek.

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