Centering Images Horizontally Side by Side
As you're attempting to center two images side by side but encountering issues with them displaying one below the other, let's delve into a solution:
The provided CSS code appears to be targeting both images using the same ID (#fblogo). However, to center them horizontally and align them next to each other, we need to apply different CSS properties:
Here's the updated CSS and HTML:
CSS
.fblogo { display: inline-block; margin-left: auto; margin-right: auto; height: 30px; } #images{ text-align:center; }
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>
Demo:
Refer to the updated demo here: [DEMO LINK]
The above is the detailed content of How can I center two images side by side in HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!