Bagaimana untuk Memusatkan Dua Imej Bersebelahan?

Meletakkan Dua Imej Bersebelahan

Apabila cuba memusatkan dua imej secara mendatar, adalah perkara biasa untuk menghadapi isu di mana imej kelihatan sejajar menegak sebaliknya . Untuk menyelesaikan masalah ini, pertimbangkan perkara berikut:

CSS Asal:

<code class="css">#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}</code>

CSS yang Diperbaiki:

<code class="css">.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

#images{
    text-align:center;
}</code>

Perubahan:

• Gantikan paparan: blok dengan paparan: inline-block.
• Alih keluar pemilih ID #fblogo dan gunakan pemilih kelas .fblogo sebaliknya.
• Tambah div baharu dengan imej ID dan sifat penjajaran teks ditetapkan ke tengah.

HTML yang diubah suai:

<code class="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></code>

Pengubahsuaian ini memastikan imej dipaparkan sebaris dalam div imej dan dipusatkan secara mendatar dalam bekas induk.

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