How to align two images side by side using CSS: Centering both images side by

Question

How to align two images side by side using CSS: Centering both images side by

Struggling to center two images side by side? Despite efforts, the images always end up stacked vertically. Any tips on achieving the desired side-by-side alignment?

Thank you!

HTML code

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="701f1c091d00191118111113180430181f041d11191c5e131f1d">[email protected]</a>">
<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>`

CSS code

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

css

Answer 1

Answer №1

Consider making the following adjustments:

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

#images{
    text-align:center;
}

HTML

<div id="images">
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56393a2f3b263f3736353e22163e39223b373f3a7835393b">[email protected]</a>">
    <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>

View the DEMO here.

Answer 2

Consider making the following adjustments:

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

#images{
    text-align:center;
}

HTML

<div id="images">
    <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56393a2f3b263f3736353e22163e39223b373f3a7835393b">[email protected]</a>">
    <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>

View the DEMO here.

Answer 3

Answer №2

You should never assign the same ID to two different elements.

Furthermore, by defining them as block elements, you are essentially forcing them to display on separate lines, for better readability.

Consider using the following structure instead:

<div class="button"><a href="..."><img src="..."... /></a></div>
<div class="button"><a href="..."><img src="..."... /></a></div>

CSS:

.button {
    width: 50%;
    float: left;
    text-align: center;
}

Answer 4

You should never assign the same ID to two different elements.

Furthermore, by defining them as block elements, you are essentially forcing them to display on separate lines, for better readability.

Consider using the following structure instead:

<div class="button"><a href="..."><img src="..."... /></a></div>
<div class="button"><a href="..."><img src="..."... /></a></div>

CSS:

.button {
    width: 50%;
    float: left;
    text-align: center;
}

Answer 5

Answer №3

Utilizing Flexbox is a great way to achieve this effect with only two CSS rules applied to a wrapping div.

.social-media{
    display: flex;
    justify-content: center;
}

<div class="social-media">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad5d6c3d7Cad3dbd2dbdbd9d2cefad2D5ced7dbd3d694d9d5d7">[email protected]</a>">
<img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.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>

Answer 6

Utilizing Flexbox is a great way to achieve this effect with only two CSS rules applied to a wrapping div.

.social-media{
    display: flex;
    justify-content: center;
}

<div class="social-media">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad5d6c3d7Cad3dbd2dbdbd9d2cefad2D5ced7dbd3d694d9d5d7">[email protected]</a>">
<img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.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>

Answer 7

Answer №4

While this question may be old, there is a great HTML5 solution available. You can enclose everything in a <figure></figure> tag. Your code would resemble the following:

<div id="wrapper">
<figure>

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="442b283d29342d252c30042c2b3029252d286a272b29">[email protected]</a>">
<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>

</figure>
</div>

Additionally, include the following CSS:

#wrapper{
 text-align:center;
}

Answer 8

While this question may be old, there is a great HTML5 solution available. You can enclose everything in a <figure></figure> tag. Your code would resemble the following:

<div id="wrapper">
<figure>

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="442b283d29342d252c30042c2b3029252d286a272b29">[email protected]</a>">
<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>

</figure>
</div>

Additionally, include the following CSS:

#wrapper{
 text-align:center;
}

Answer 9

Answer №5

For a recent project, I implemented a unique solution using the h6 tag, which I hadn't utilized before:

Here is the HTML code snippet:

<h6><img alt="small drawing" src="../Images/image1.jpg" width="50%"/> <img alt="small drawing" src="../Images/image2.jpg" width="50%"/><br/>Optional caption text</h6>

The spacing between the image tags creates a vertical gap between the images. While the width argument in each img tag is optional, it helps in neatly sizing the images to fit the page width. It's important to ensure that each image takes up only 50% of the width (or 33% for 3 images). Additionally, the width argument should follow the alt and src attributes for proper functionality.

Here is the corresponding CSS code snippet:

/* h6: set presentation of images */
h6
  {
  font-family: "Franklin Gothic Demi", serif;
  font-size: 1.0em;
  font-weight: normal;
  line-height: 1.25em;
  text-align: center;
  }

The CSS styling defines the appearance of the caption text, and the text-align property centers both the images and the caption text on the page.

Answer 10

For a recent project, I implemented a unique solution using the h6 tag, which I hadn't utilized before:

Here is the HTML code snippet:

<h6><img alt="small drawing" src="../Images/image1.jpg" width="50%"/> <img alt="small drawing" src="../Images/image2.jpg" width="50%"/><br/>Optional caption text</h6>

The spacing between the image tags creates a vertical gap between the images. While the width argument in each img tag is optional, it helps in neatly sizing the images to fit the page width. It's important to ensure that each image takes up only 50% of the width (or 33% for 3 images). Additionally, the width argument should follow the alt and src attributes for proper functionality.

Here is the corresponding CSS code snippet:

/* h6: set presentation of images */
h6
  {
  font-family: "Franklin Gothic Demi", serif;
  font-size: 1.0em;
  font-weight: normal;
  line-height: 1.25em;
  text-align: center;
  }

The CSS styling defines the appearance of the caption text, and the text-align property centers both the images and the caption text on the page.

How to align two images side by side using CSS: Centering both images side by

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The elements are stacked on top of each other, but unfortunately, the scroll

Connecting a custom bootstrap stylesheet to WordPress

Is it possible to manipulate an image tag's image using only CSS?

Avoiding Backbone Routing Conflicts when Implementing CSS3 Targeting

Why isn't my li:hover responding the way it should?

What are the steps to create a reliable menu?

Conceal specific image(s) on mobile devices

Personalized Radio Styling and Multi-line Text Wrapping

Nested accordions with Bootstrap 4.3 featuring plus and minus icons

CSS: dealing with content that spills outside of a div

Web Essentials is experiencing a problem with minified CSS

Is there a way to set a custom background image for a specific Vaadin view?

Setting the maximum width for images across various Bootstrap responsive sizes: a step-by-step guide

Bracketing the Webpage: A Display of Unique Design

Are box shadows displaying different hues across various web browsers?

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

How to position text in the center of a video using CSS

The Bootstrap row snag causing text display issues

How to Convert Pixel Units to Rem and Em in CSS?

What is the best way to create a design with an image on the left and text on the right side?