Comment centrer deux images côte à côte à l'aide de CSS ?

Centrer les images côte à côte avec CSS

Question :

Je suis confronté à un problème en essayant d'en centrer deux images adjacentes les unes aux autres dans mon document HTML. Malgré mes efforts, ils s’affichent constamment les uns en dessous des autres. Comment puis-je centrer efficacement les images et les placer côte à côte ?

Code HTML :

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

Code CSS :

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

Solution :

Pour aligner les images horizontalement, modifiez le code CSS comme suit :

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

#images{
    text-align:center;
}

HTML modifié :

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

Démonstration en direct :

[Lien démo]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!