CSS - center two images in css side by side

Question

I am trying to center two images side by side, but for some reason it always displays the images beneath each other. Does anyone know how I could get them centered and next to each other?

Thanks!

HTML code

<a href="mailto:olympiahaacht@hotmail.com">
<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; 
}

in 2022, the answer is now [flexbox](https://stackoverflow.com/a/43127410/542251) not float — Liam, Mar 22 '22 at 11:37
The problem with using Flexbox is that at this time it is not supported by the big email clients such as Gmail and Outlook. See https://codesignal.com/blog/engineering/how-to-avoid-issues-with-your-html-email-formatting/ — rise.riyo, Dec 05 '22 at 18:05

The Alpha · Accepted Answer · 2014-11-08T22:03:32.343

76

Try changing

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

to

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

#images{
    text-align:center;
}

HTML

<div id="images">
    <a href="mailto:olympiahaacht@hotmail.com">
    <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.

edited Nov 08 '14 at 22:03

answered Aug 05 '12 at 19:33

The Alpha

143,660
29
287
307

2

This aligns them next to each other, but doesn't center them. – CustomX Aug 05 '12 at 19:37
2

It seems the image attached to the email address does not work anymore. Here you will find a fixed version of the fiddle of this answer (along with some changes to improve code readability): http://jsfiddle.net/hBCzA/1/ (I have just wrote this in the source of img http://a.fsdn.com/sd/topics/programming_64.png) – pablofiumara Sep 16 '13 at 23:22
@TheAlpha How do I add space of 10px between the image in your example – nandanself Dec 26 '15 at 20:29
Add `images a { margin:0 5px 0 5px }`. Hope you can adjust it :-) – The Alpha Dec 26 '15 at 22:35
Is the `margin-left:auto 0; margin-right:auto 0;` necessary? – JohnB Jul 17 '16 at 14:54
No (works on chrome at least), try without those margins :) – The Alpha Jul 17 '16 at 16:01
Can I remove the `display: inline-block;` line of code? I find it also working. http://jsfiddle.net/wfsdx0rp/ – Rick Sep 24 '19 at 14:09

score 6 · Answer 2 · answered Aug 05 '12 at 19:33

You can't have two elements with the same ID.

Aside from that, you are defining them as block elemnts, meaning (in layman's terms) that they are being forced to appear on their own line.

Instead, try something like this:

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

CSS:

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

score 6 · Answer 3 · edited Mar 22 '22 at 11:38

Flexbox can do this with just two css rules on a surrounding div.

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

<div class="social-media">
<a href="mailto:olympiahaacht@hotmail.com">
<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>

score 3 · Answer 4 · edited Mar 22 '22 at 11:38

I understand that this question is old, but there is a good solution for it in HTML5. You can wrap it all in a <figure></figure> tag. The code would look something like this:

<div id="wrapper">
<figure>

<a href="mailto:olympiahaacht@hotmail.com">
<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>

and the CSS:

#wrapper{
 text-align:center;
}

Max Brewster · Answer 5 · 2014-09-05T08:50:32.553

I've just done this for a project, and achieved it by using the h6 tag which I wasn't using for anything else:

in html code:

<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 space between the image tags puts a vertical gap between the images. The width argument in each img tag is optional, but it neatly sizes the images to fill the width of the page. Notice that each image must be set to take up only 50% of the width. (Or 33% if you're using 3 images.) The width argument must come after the alt and src arguments or it won't work.

in css code:

/* 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 text items set the look of the caption text, and the text-align property centers both the images and the caption text.

Don't use a tag just because you weren't using it anywhere--that's what classes are for (use a div or a span). Tags are meant to be semantic and most browsers have default styles for them which need to be reset. — Marshall, Jun 26 '15 at 15:58

CSS - center two images in css side by side

5 Answers5

Linked

Related