Comment centrer deux images côte à côte en CSS ?

Centrer deux images côte à côte en CSS

Un défi courant dans la conception Web consiste à aligner les images horizontalement, en particulier lorsqu'elles doivent être affichés côte à côte. Cela peut être délicat, mais avec quelques ajustements de votre CSS, vous pouvez facilement obtenir le résultat souhaité.

Une approche courante pourrait consister à utiliser les propriétés display: block et margin: auto. Cependant, cette méthode entraîne souvent un empilement des images verticalement plutôt qu'horizontalement.

Pour résoudre ce problème, voici une solution affinée :

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>

En définissant display: inline-block pour les images, vous leur permettez de s'écouler horizontalement les unes à côté des autres le long de la ligne de base. De plus, la propriété text-align:center appliquée au conteneur parent garantit que les images sont centrées dans le conteneur.

Cette approche garantit que les images seront alignées côte à côte, offrant une mise en page visuellement attrayante et réactive. .

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!