Penyelesaian kepada masalah CSS bukan berpusat

Apabila menulis tapak web atau aplikasi, anda sering menghadapi masalah reka letak CSS, dan salah satu yang paling biasa ialah elemen tidak berpusat. Sama ada anda memusatkan teks, imej atau keseluruhan kawasan, penjajaran CSS sentiasa menjadi cabaran biasa. Berikut ialah beberapa masalah miscentering CSS biasa dan penyelesaiannya.

1. Teks tidak dipusatkan

Apabila kita ingin memusatkan teks dalam elemen, cara yang paling biasa ialah menggunakan atribut penjajaran teks dan menetapkannya ke tengah . Tetapi ini hanya berfungsi untuk kandungan sebaris dalam elemen sebaris dan elemen peringkat blok. Jika kita ingin memusatkan teks dalam elemen peringkat blok dengan lebar tetap, kita perlu menggunakan kaedah lain.

Penyelesaian:

Memusatkan teks boleh dicapai dengan menggunakan kod CSS berikut pada elemen peringkat blok tempat teks berada.

display: flex;
align-items: center;
justify-content: center;

Ini akan memusatkan teks di sepanjang paksi menegak dan mendatar. Ambil perhatian bahawa kaedah ini berfungsi untuk elemen peringkat blok dengan lebar dan ketinggian tetap.

2. Elemen tidak berpusat

Apabila kita ingin memusatkan seluruh kawasan, kaedah biasa ialah menggunakan atribut margin:auto. Tetapi terdapat beberapa situasi di mana pendekatan ini tidak berkesan.

Penyelesaian:

Menggunakan elemen induk dengan susun atur kotak fleksibel digunakan, kesan pemusatan boleh dicapai dengan mudah.

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

Ini akan memusatkan elemen induk di sepanjang paksi mendatar dan menegak, dan memusatkan semua elemen anak di dalamnya.

3. Imej tidak berpusat

Jika kita ingin memusatkan imej dalam bekas, kita boleh menggunakan atribut text-align:center. Tetapi kaedah ini hanya boleh digunakan dalam elemen peringkat blok.

Penyelesaian:

Cuba gunakan kod CSS berikut dalam elemen induk imej:

img {
    display: block;
    margin: auto;
}

Ini akan menukar imej kepada tahap blok menggunakan paparan:block elemen atribut dan gunakan atribut margin:auto untuk memusatkan imej dalam elemen induk.

Cara lain ialah menggunakan imej sebagai imej latar belakang. Untuk kes ini kita perlu menggunakan sifat kedudukan latar belakang.

div {
    background: url('image.jpg') no-repeat center center;
    background-size: cover;
}

Ini akan memusatkan imej pada elemen div dan menskalakannya menggunakan atribut saiz latar belakang.

Ringkasan

Di atas ialah beberapa masalah dan penyelesaian CSS biasa yang tidak berpusat. Memahami kaedah ini bukan sahaja dapat membantu kami menyusun tapak web dan aplikasi dengan lebih baik, tetapi juga meningkatkan kemahiran dan kecekapan CSS kami.

Atas ialah kandungan terperinci Penyelesaian kepada masalah CSS bukan berpusat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!