Maison >interface Web >tutoriel CSS >Comment centrer deux images côte à côte ?

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

DDD
DDDoriginal
2024-11-02 00:39:31593parcourir

How to Center Two Images Side by Side?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn