Apakah cara untuk memusatkan imej dalam css

Kaedah untuk memusatkan imej CSS: 1. Gunakan gaya "text-align: center;" 2. Gunakan gaya "margin: 0 auto;" 4. Gunakan grid susun atur ; 5. Gunakan kedudukan mutlak untuk menyelaraskan 6. Gunakan atribut latar belakang untuk memusatkan imej latar belakang.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

html

 <div id="pic">
        <img src=star.jpg class="logo">
 </div>

1. (Yang paling mudah) penjajaran atribut teks

kawalan penjajaran teks Penjajaran baris teks dalam elemen. Anda boleh menetapkan div induk dalam img, supaya img boleh menjadi teks div, dan kemudian menggunakan penjajaran teks untuk mengubah suai atribut div. (Tambahkan atribut pada elemen induk)

Nota: Elemen anak mestilah sebaris atau blok sebaris jika elemen anak juga ialah div, anda perlu menetapkan paparan: sebaris/ inline-block untuk elemen anak . Elemen anak img di sini adalah sebaris, jadi langkah ini diabaikan. Kaedah ini sesuai untuk elemen sebaris. Contohnya, img berpusat

css

#pic {
    text-align: center;   /*表示div的子元素居中*/
}

2. Gunakan margin dengan mahir

css

img {
    display: block;    
    width: 100px;
    margin: 0 auto;
}

Tiga perkara di atas amat diperlukan.

margin: 0 auto; prasyarat untuk berpusat ialah:

• elemen sebaris mesti ditetapkan untuk dipaparkan: blok; elemen sebaris ditetapkan. Jika ia adalah input, ia tidak perlu ditetapkan.

• elemen mesti mempunyai lebar; kecuali elemen yang mempunyai lebar terbina dalam, seperti butang dan input.

Mengikut premis, terdapat kaedah lain - ubah suai atribut elemen induk

#pic {
    width: 100px;
    margin: 0 auto;
}    /*父元素div属于block，所以不用再设 display: block;*/

Secara ringkasnya, kaedah ini sesuai untuk elemen blok . Sebagai contoh, batasan margin

berpusat div dan input: apabila memaparkan dua imej dalam satu baris, margin perlu diubah suai dengan sewajarnya.

3. Susun atur kotak fleksibel

css

#pic {
    display: flex;   
    justify-content: center;
    }

Susun atur kotak fleksibel boleh menggunakan beberapa baris css untuk mencapai hampir mana-mana susun atur. Dan perkara yang paling menakjubkan ialah walaupun dua baris teratas n gambar boleh dipusatkan, tanpa perlu mengambil kira susun atur dan kedudukan gambar.

4. Reka letak grid

Kotak fleksibel paling biasa digunakan dalam bar navigasi. Sebaliknya, susun atur grid ialah sistem susun atur sejagat.

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

Jadi sangat mudah untuk menangani masalah menjajarkan berbilang gambar.

5. Penjajaran dalam kedudukan mutlak

css

#pic {
    position: relative;   /*设置绝对定位元素（img）的容纳块，如果不设置，那么容纳块默认为body*/
}
.logo {
    position: absolute;   
    right: 1em; left: 1em;     //表示左右距离相等
    margin: 0 auto;         //与方法二相似
}

Perbezaan terbesar daripada kaedah dua ialah penggunaan margin adalah untuk elemen blok . Jika anda menggunakan kedudukan, anda tidak perlu menetapkan blok. Walau bagaimanapun, kedudukan biasanya digunakan dalam susun atur bingkai Jika ia hanya untuk memusatkan gambar, ia adalah berlebihan dan menyusahkan. Tidak disyorkan.

6. Tengahkan imej latar belakang

html

dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68

css

div {
    height: 1000px;  /*高度非常重要*/
    background: url(star.jpg) no-repeat top center; 
}

Prasyarat: selagi kandungan elemen kosong , anda mesti menetapkan ketinggian. Oleh kerana kandungan div kosong, ketinggian mesti ditetapkan, jika tidak, div tidak akan mempunyai ruang dan imej latar belakang tidak akan dipaparkan. Kalau badan tak perlu, sebab badan tu ada ketinggian sendiri.

Penghadan menetapkannya sebagai imej latar belakang ialah anda tidak boleh menetapkan atribut imej seperti hiperpautan, tajuk, alt, dsb. Jika ia bukan imej latar belakang, cuba jangan gunakan format ini.

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah cara untuk memusatkan imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!