Bagaimanakah saya boleh memusatkan dua imej bersebelahan dalam HTML dan CSS?

Memusatkan Imej Secara Mendatar Bersebelahan

Ketika anda cuba memusatkan dua imej sebelah menyebelah tetapi menghadapi masalah dengan mereka memaparkan satu di bawah yang lain, mari kita mendalami penyelesaian:

Kod CSS yang disediakan nampaknya menyasarkan kedua-dua imej menggunakan ID yang sama (#fblogo). Walau bagaimanapun, untuk memusatkannya secara mendatar dan menjajarkannya bersebelahan antara satu sama lain, kita perlu menggunakan sifat CSS yang berbeza:

1. Gayakan kedua-dua imej dengan kelas: Daripada menggunakan ID, tetapkan kedua-dua imej kelas yang sama, cth., .fblogo. Ini akan membolehkan kami menyasarkannya secara individu.
2. Paparan blok sebaris: Tukar paparan: blok; untuk memaparkan: inline-block; untuk .fblogo. Ini memaparkan imej sebagai elemen sebaris, membenarkan ia mengalir secara mendatar.
3. Jing automatik: Tetapkan jidar-kiri: auto; dan margin-kanan: auto; untuk .fblogo. Ini memusatkan imej dalam bekasnya.
4. Balut dalam bekas: Balut imej anda dalam bekas, seperti div, dengan ID seperti #imej.
5. Jajarkan bekas: Tambah jajaran teks: tengah; kepada #imej. Ini memusatkan imej dalam bekas.

Berikut ialah CSS dan HTML yang dikemas kini:

CSS

.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

#images{
    text-align:center;
}

HTML

<div id="images">
    <a href="mailto:[email&#160;protected]">
    <img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg">
    </a>
    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
    <img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg">
    </a>
</div>​

Demo:

Rujuk demo yang dikemas kini di sini: [DEMO LINK]

Atas ialah kandungan terperinci Bagaimanakah saya boleh memusatkan dua imej bersebelahan dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!