Wie zentriere ich zwei Bilder horizontal mit CSS?

Zwei Bilder horizontal mit CSS zentrieren

Beim Versuch, zwei Bilder nebeneinander auszurichten, kommt es häufig vor, dass sie stattdessen vertikal gestapelt werden. Um dieses Problem zu beheben, können wir den CSS-Code ändern.

Im bereitgestellten HTML-Code werden zwei Bilder in Anker-Tags platziert. Der CSS-Code zielt darauf ab, diese Bilder zu zentrieren, stapelt sie jedoch unbeabsichtigt vertikal. Passen wir das CSS an, um eine korrekte horizontale Ausrichtung zu erreichen.

Die erste Änderung besteht darin, die Anzeigeeigenschaft der Bilder von „Block“ in „Inline-Block“ zu ändern. Mit Inline-Block kann ein Element als Block behandelt werden (Breite und Höhe können eingestellt werden), während es sich weiterhin wie ein Inline-Element verhält.

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

wird zu:

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

Weitere Informationen Um die Bilder korrekt zu zentrieren, führen wir eine neue CSS-Regel ein.

#images{
    text-align:center;
}

Diese Regel richtet den Inhalt des div-Elements „images“, das die beiden Bildlinks enthält, zentriert aus.

Zuletzt müssen wir den HTML-Code aktualisieren, um beiden Bildern einen gemeinsamen Klassennamen zu geben, „fblogo“, auf den im geänderten CSS-Code verwiesen wird. Der geänderte HTML-Code:

<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>

Mit diesen Änderungen werden die beiden Bilder nun zentriert und nebeneinander angezeigt.

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