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

Centrer les images horizontalement côte à côte

Lorsque vous essayez de centrer deux images côte à côte mais que vous rencontrez des problèmes pour en afficher une ci-dessous de l'autre, examinons une solution :

Le code CSS fourni semble cibler les deux images en utilisant le même identifiant (#fblogo). Cependant, pour les centrer horizontalement et les aligner les unes à côté des autres, nous devons appliquer différentes propriétés CSS :

1. Stylisez les deux images avec une classe : Au lieu d'utiliser un identifiant, attribuez aux deux images la même classe, par exemple .fblogo. Cela nous permettra de les cibler individuellement.
2. Affichage en bloc en ligne :Modifier l'affichage : bloquer ; pour afficher : inline-block ; pour .fblogo. Cela affiche les images sous forme d'éléments en ligne, leur permettant de s'écouler horizontalement.
3. Marges automatiques : Définir la marge gauche : auto ; et marge droite : auto ; pour .fblogo. Cela centre les images dans leur conteneur.
4. Envelopper dans un conteneur : Enveloppez vos images dans un conteneur, tel qu'un div, avec un identifiant tel que #images.
5. Alignez le conteneur : Ajoutez text-align: center; aux #images. Cela centre les images dans le conteneur.

Voici le CSS et le HTML mis à jour :

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

Démo :

Référez-vous à la démo mise à jour ici : [LIEN DEMO]

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!