Comment centrer deux images horizontalement avec CSS ?

Centrer deux images horizontalement avec CSS

Lorsque vous essayez d'aligner deux images côte à côte, il est courant de rencontrer des cas où elles s'empilent verticalement. Pour résoudre ce problème, nous pouvons modifier le code CSS.

Dans le code HTML fourni, deux images sont placées dans des balises d'ancrage. Le code CSS vise à centrer ces images, mais il les empile involontairement verticalement. Ajustons le CSS pour obtenir un alignement horizontal correct.

La première modification consiste à changer la propriété d'affichage des images de "block" à "inline-block". Inline-block permet à un élément d'être traité comme un bloc (la largeur et la hauteur peuvent être définies) tout en se comportant comme un élément en ligne.

<code class="css">#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}</code>

devient :

<code class="css">.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}</code>

Pour aller plus loin centrez correctement les images, nous introduisons une nouvelle règle CSS.

#images{
    text-align:center;
}

Cette règle aligne le contenu de l'élément div "images", qui contient les deux liens image, au centre.

Enfin, nous devons mettre à jour le code HTML pour donner aux deux images un nom de classe commun, "fblogo", qui est référencé dans le code CSS modifié. Le HTML modifié :

<code class="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>​</code>

Avec ces modifications, les deux images seront désormais centrées et affichées côte à côte.

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!