Wie kann ich in HTML und CSS zwei Bilder nebeneinander zentrieren?

Bilder horizontal nebeneinander zentrieren

Wenn Sie versuchen, zwei Bilder nebeneinander zu zentrieren, aber Probleme damit haben, dass eines davon unten angezeigt wird Zum anderen schauen wir uns eine Lösung an:

Der bereitgestellte CSS-Code scheint auf beide Bilder mit derselben ID (#fblogo) abzuzielen. Um sie jedoch horizontal zu zentrieren und nebeneinander auszurichten, müssen wir verschiedene CSS-Eigenschaften anwenden:

1. Stylen Sie beide Bilder mit einer Klasse:Anstatt eine ID zu verwenden, Weisen Sie beiden Bildern dieselbe Klasse zu, z. B. .fblogo. Dadurch können wir sie individuell ansprechen.
2. Inline-Block-Anzeige:Anzeige ändern: Block; zur Anzeige: Inline-Block; für .fblogo. Dadurch werden die Bilder als Inline-Elemente angezeigt, sodass sie horizontal fließen können.
3. Automatische Ränder: Rand links festlegen: auto; und margin-right: auto; für .fblogo. Dadurch werden die Bilder in ihrem Container zentriert.
4. In einen Container einpacken:Wickeln Sie Ihre Bilder in einen Container, z. B. ein Div, mit einer ID wie #images.
5. Richten Sie den Container aus:Fügen Sie text-align: center; zu #Bildern. Dadurch werden die Bilder im Container zentriert.

Hier ist das aktualisierte CSS und HTML:

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

Demo:

Die aktualisierte Demo finden Sie hier: [DEMO LINK]

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