Cara Memusatkan Imej Dengan Sempurna Dalam Div dalam CSS

Memusatkan Elemen Imej

Dalam pembangunan web, menjajarkan elemen dengan tepat boleh meningkatkan penampilan visual dan pengalaman pengguna dengan ketara. Satu cabaran biasa ialah memusatkan imej dalam div induknya. Artikel ini menyelidiki teknik CSS yang membolehkan pemusatan imej yang tepat.

Matlamatnya adalah untuk meletakkan imej supaya bahagian tengah imej sejajar dengan sempurna dengan bahagian tengah div induk. Selain itu, kami berhasrat untuk mengekalkan ketinggian penuh imej.

Penyelesaian:

Untuk menjajarkan imej dengan betul, kami mengubah suai CSS div induk dan bukannya mengubah CSS imej kanak-kanak. Dengan mengisytiharkan text-align: center; untuk div induk, semua elemen sebarisnya, termasuk imej, akan dipusatkan. CSS yang dikemas kini berikut mencapai matlamat ini:

<code class="css">.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* Center all inline elements */
}</code>

Kaedah ini berkesan memusatkan imej secara mendatar dan menegak.

Pertimbangan Tambahan:

Dalam keadaan tertentu, anda mungkin melihat sedikit jurang di bawah imej. Jurang ini timbul daripada ketinggian baris lalai bagi elemen sebaris, terutamanya dalam pelayar lama. Untuk menangani perkara ini, sifat CSS berikut boleh digunakan pada imej:

<code class="css">.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* Eliminate the vertical gap */
}</code>

Dengan menetapkan vertical-align: bottom;, imej akan diletakkan secara menegak di bahagian bawah ruang yang tersedia, menyelesaikan jurang isu.

Kesimpulannya, menggunakan penjajaran teks: tengah; kepada div induk dan vertical-align: bottom; kepada elemen imej menyediakan penyelesaian yang elegan dan berkesan untuk memusatkan imej dalam div sambil mengekalkan ketinggian penuhnya.

Atas ialah kandungan terperinci Cara Memusatkan Imej Dengan Sempurna Dalam Div dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!