Home > Web Front-end > CSS Tutorial > How can I center two images side by side in HTML and CSS?

How can I center two images side by side in HTML and CSS?

Mary-Kate Olsen
Release: 2024-11-04 03:49:30
Original
1009 people have browsed it

How can I center two images side by side in HTML and CSS?

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:

  1. Style both images with a class: Instead of using an ID, assign both images the same class, e.g., .fblogo. This will allow us to target them individually.
  2. Inline-block display: Change display: block; to display: inline-block; for .fblogo. This displays the images as inline elements, allowing them to flow horizontally.
  3. Automatic margins: Set margin-left: auto; and margin-right: auto; for .fblogo. This centers the images in their container.
  4. Wrap in a container: Wrap your images in a container, such as a div, with an ID like #images.
  5. Align the container: Add text-align: center; to #images. This centers the images within the container.

Here's the updated CSS and HTML:

CSS

.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

#images{
    text-align:center;
}
Copy after login

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>​
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template