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

Positionnement de deux images côte à côte

Lorsque vous essayez de centrer deux images horizontalement, il est courant de rencontrer des problèmes où les images apparaissent plutôt alignées verticalement. . Pour résoudre ce problème, considérez les éléments suivants :

CSS d'origine :

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

CSS amélioré :

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

#images{
    text-align:center;
}</code>

Modifications :

• Remplacer display: block par display: inline-block.
• Supprimez le sélecteur d'ID #fblogo et utilisez plutôt le sélecteur de classe .fblogo.
• Ajouter un nouveau div avec les images d'identification et une propriété d'alignement du texte définie sur center.

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>

Ces modifications garantissent que les images sont affichés en ligne dans le div images et sont centrés horizontalement dans le conteneur parent.

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!