Wie zentriere ich zwei Bilder nebeneinander 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;
}

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>

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!