Bagaimana untuk Memusatkan Dua Imej Secara Mendatar dengan CSS?

Memusatkan Dua Imej Secara Mendatar dengan CSS

Apabila cuba menjajarkan dua imej sebelah menyebelah, adalah perkara biasa untuk menghadapi keadaan di mana ia bertindan menegak sebaliknya. Untuk menyelesaikan isu ini, kami boleh mengubah suai kod CSS.

Dalam kod HTML yang disediakan, dua imej diletakkan dalam teg sauh. Kod CSS bertujuan untuk memusatkan imej ini, tetapi ia secara tidak sengaja menyusunnya secara menegak. Mari kita laraskan CSS untuk mencapai penjajaran mendatar yang betul.

Pengubahsuaian pertama ialah menukar sifat paparan imej daripada "blok" kepada "blok sebaris." Blok sebaris membenarkan elemen untuk dianggap sebagai blok (lebar dan tinggi boleh ditetapkan) sambil masih berkelakuan sebagai elemen sebaris.

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

menjadi:

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

Untuk selanjutnya pusatkan imej dengan betul, kami memperkenalkan peraturan CSS baharu.

#images{
    text-align:center;
}

Peraturan ini menjajarkan kandungan elemen div "imej", yang mengandungi dua pautan imej, ke tengah.

Akhir sekali, kami perlu mengemas kini kod HTML untuk memberikan kedua-dua imej nama kelas biasa, "fblogo," yang dirujuk dalam kod CSS yang diubah suai. 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>

Dengan pengubahsuaian ini, kedua-dua imej kini akan dipusatkan dan dipaparkan sebelah menyebelah.

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