How to Center Two Images Side-by-Side Using CSS?-CSS Tutorial-php.cn

How to Center Two Images Side-by-Side Using CSS?

Barbara Streisand

Release： 2024-11-02 20:01:30

Original

954 people have browsed it

How to Center Two Images Side-by-Side Using CSS?

Centering Images Side by Side with CSS

Question:

I'm facing an issue while attempting to center two images adjacent to each other in my HTML document. Despite my efforts, they persistently display one below the other. How can I effectively center the images and place them side-by-side?

HTML Code:

<a href="mailto:[email&#160;protected]">
<img id="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 id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/>
</a>

Copy after login

CSS Code:

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

Copy after login

Solution:

To align the images horizontally, modify the CSS code as follows:

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

#images{
    text-align:center;
}

Copy after login

Modified 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

Live Demonstration:

[Demo Link]

The above is the detailed content of How to Center Two Images Side-by-Side Using CSS?. For more information, please follow other related articles on the PHP Chinese website!