Wie zentriere ich zwei Bilder nebeneinander?

Zwei Bilder nebeneinander positionieren

Beim Versuch, zwei Bilder horizontal zu zentrieren, treten häufig Probleme auf, bei denen die Bilder stattdessen vertikal ausgerichtet angezeigt werden . Um dieses Problem zu beheben, beachten Sie Folgendes:

Original-CSS:

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

Verbessertes CSS:

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

#images{
    text-align:center;
}</code>

Änderungen:

• Ersetzen Sie display: block durch display: inline-block.
• Entfernen Sie den ID-Selektor #fblogo und verwenden Sie stattdessen den Klassenselektor .fblogo.
• Hinzufügen ein neues Div mit den ID-Bildern und einer Textausrichtungseigenschaft, die auf „zentriert“ eingestellt ist.

Geänderter 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>

Diese Änderungen stellen sicher, dass die Bilder werden inline innerhalb der Bilder-Div angezeigt und horizontal zentriert im übergeordneten Container.

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