Maison >interface Web >tutoriel CSS >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 :
HTML modifié :
<code class="html"><div id="images"> <a href="mailto:[email 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!