Bagaimana untuk Memusatkan Dua Imej Bersebelahan Menggunakan CSS?

Memusatkan Imej Bersebelahan dengan CSS

Soalan:

Saya menghadapi isu semasa cuba memusatkan dua imej bersebelahan antara satu sama lain dalam dokumen HTML saya. Walaupun saya berusaha, mereka terus-menerus memaparkan satu di bawah yang lain. Bagaimanakah saya boleh memusatkan imej dengan berkesan dan meletakkannya bersebelahan?

Kod HTML:

<a href="mailto:[email&#160;protected]">
<img id="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 id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/>
</a>

Kod CSS:

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

Penyelesaian:

Untuk menjajarkan imej secara mendatar, ubah suai kod CSS seperti berikut:

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

#images{
    text-align:center;
}

HTML Diubah Suai:

<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>​

Demonstrasi Langsung:

[Pautan Demo]

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Dua Imej Bersebelahan Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!