Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie zentriere ich zwei Bilder nebeneinander in CSS?

DDD
Freigeben: 2024-11-01 16:20:02
Original
907 Leute haben es durchsucht

How to Center Two Images Side by Side in CSS?

Zwei Bilder nebeneinander in CSS zentrieren

Eine häufige Herausforderung im Webdesign besteht darin, Bilder horizontal auszurichten, insbesondere wenn dies erforderlich ist nebeneinander angezeigt. Dies kann schwierig sein, aber mit ein paar Änderungen an Ihrem CSS können Sie leicht das gewünschte Ergebnis erzielen.

Ein gängiger Ansatz könnte darin bestehen, die Eigenschaften display:block und margin:auto zu verwenden. Allerdings führt diese Methode häufig dazu, dass die Bilder vertikal statt horizontal gestapelt werden.

Um dieses Problem zu beheben, finden Sie hier eine verfeinerte Lösung:

CSS:

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

#images {
    text-align:center;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

Durch die Einstellung display: inline-block für die Bilder ermöglichen Sie, dass diese horizontal nebeneinander entlang der Grundlinie fließen. Darüber hinaus stellt die auf den übergeordneten Container angewendete text-align:center-Eigenschaft sicher, dass die Bilder innerhalb des Containers zentriert sind.

Dieser Ansatz garantiert, dass die Bilder nebeneinander ausgerichtet werden, was ein optisch ansprechendes und ansprechendes Layout bietet .

Das obige ist der detaillierte Inhalt vonWie zentriere ich zwei Bilder nebeneinander in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage