Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memusatkan Dua Imej Bersebelahan Menggunakan CSS?

Bagaimana untuk Memusatkan Dua Imej Bersebelahan Menggunakan CSS?

Barbara Streisand
Lepaskan: 2024-11-02 20:01:30
asal
1082 orang telah melayarinya

How to Center Two Images Side-by-Side Using 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>
Salin selepas log masuk

Kod CSS:

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

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;
}
Salin selepas log masuk

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>​
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan