0

I've been searching on the internet for hours trying to find a solution to something that seems so simple; aligning 2 images next to each other. Both the images i am using are the same size dimensions (albeit one of them is a bit smaller), i have them centered via <center> which works just fine. Now the problem is that i want them both aligned next to each other, however, they are on top of each other instead. I've tried many different CSS styles, and many different Div classes, but none of them work. Thus i give up and now i am asking here. Can anyone help me solve this simple problem. Here is my current HTML code for the images:

<center><img src="resources/redberyl.png" alt="Red Beryl" style="border: #000000 1px solid; width:400px; height:300px;"></center> 
<center><figcaption><font face="Verdana"><b>Red Beryl<br>The Beryliest</b></font></figcaption></center>
<center><img src="resources/nicholas.png" alt="Nicholas" style="border: #000000 1px solid; width:400px; height:300px;"></center>
<center><figcaption><font face="Verdana"><b>Nicholas<br>All his glory</b></font></figcaption></center>
Aditya Gupta
  • 55
  • 6
sodaddict
  • 37
  • 2
  • 9

2 Answers2

1

.align-center {text-align: center; margin: auto;}
<div class="align-center">
  <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx">
  <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx">
</div>

with figcaption you need to modify your html a bit

figcaption {width: 50%; float: left; text-align: center; margin: auto;}
<figcaption>
  <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx" alt="Red Beryl" style="border: #000000 1px solid; width:400px; height:300px;">
  <font face="Verdana"><b>Red Beryl<br>The Beryliest</b></font>
</figcaption>
<figcaption>
<img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx" alt="Nicholas" style="border: #000000 1px solid; width:400px; height:300px;">
  <font face="Verdana"><b>Nicholas<br>All his glory</b></font>
</figcaption>
dtmiRRor
  • 581
  • 4
  • 17
  • Well this works, but only when i take out the figcaptions, any way i can get this working with figcaptions? – sodaddict Jun 23 '17 at 21:47
0

With pure HTML, you can just have one of them centered and have the end center tag end after the second picture:

<center><img src = "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fnathanneil.com%2Fwp-content%2Fuploads%2F2015%2F11%2Fcpp.png&f=1" width = "250">
<img src = "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fnathanneil.com%2Fwp-content%2Fuploads%2F2015%2F11%2Fcpp.png&f=1" width = "250"></center>

You could also use margin: auto; instead of using a center:

img {
    margin: auto;
}
<img src = "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fnathanneil.com%2Fwp-content%2Fuploads%2F2015%2F11%2Fcpp.png&f=1" width = "250">
<img src = "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fnathanneil.com%2Fwp-content%2Fuploads%2F2015%2F11%2Fcpp.png&f=1" width = "250">

Just so you know, margin: auto; only lines them up. It still won't center them in this case.

CyanCoding
  • 1,012
  • 1
  • 12
  • 35