Wie zentriere ich zwei Bilder nebeneinander mit CSS?-CSS-Tutorial-php.cn

Wie zentriere ich zwei Bilder nebeneinander mit CSS?

Barbara Streisand

Freigeben： 2024-11-02 20:01:30

Original

954 Leute haben es durchsucht

How to Center Two Images Side-by-Side Using CSS?

Bilder nebeneinander mit CSS zentrieren

Frage:

Beim Versuch, zwei zu zentrieren, tritt ein Problem auf Bilder nebeneinander in meinem HTML-Dokument. Trotz meiner Bemühungen werden sie ständig untereinander angezeigt. Wie kann ich die Bilder effektiv zentrieren und nebeneinander platzieren?

HTML-Code:

<a href="mailto:[email&#160;protected]">
<img id="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 id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/>
</a>

Nach dem Login kopieren

CSS-Code:

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

Nach dem Login kopieren

Lösung:

Um die Bilder horizontal auszurichten, ändern Sie den CSS-Code wie folgt:

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

#images{
    text-align:center;
}

Nach dem Login kopieren

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

Live-Demonstration:

[Demo-Link]

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