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

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

DDD
Libérer: 2024-11-01 16:20:02
original
995 Les gens l'ont consulté

How to Center Two Images Side by Side in 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;
}
Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal