32

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:[email 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>`

CSS code

#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}
2
  • in 2022, the answer is now flexbox not float
    – Liam
    Mar 22, 2022 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 codesignal.com/blog/engineering/…
    – rise.riyo
    Dec 5, 2022 at 18:05

5 Answers 5

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:[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.

7
  • 2
    This aligns them next to each other, but doesn't center them.
    – CustomX
    Aug 5, 2012 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): jsfiddle.net/hBCzA/1 (I have just wrote this in the source of img a.fsdn.com/sd/topics/programming_64.png) Sep 16, 2013 at 23:22
  • @TheAlpha How do I add space of 10px between the image in your example
    – nandanself
    Dec 26, 2015 at 20:29
  • Add images a { margin:0 5px 0 5px }. Hope you can adjust it :-)
    – The Alpha
    Dec 26, 2015 at 22:35
  • Is the margin-left:auto 0; margin-right:auto 0; necessary?
    – JohnB
    Jul 17, 2016 at 14:54
6

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;
}
0
6

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:[email protected]">
<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>

0
3

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:[email 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>

</figure>
</div>

and the CSS:

#wrapper{
 text-align:center;
}
-2

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.

1
  • 2
    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, 2015 at 15:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.