How to align two images in html/css

Question

So I have two images with captions under them. I want to be able to put them side by side. I've tried in css float: right; and display: inline-block; but I can't simply get it to work. Please and thank you. I'm new to coding.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<figure id="crackers1">
  <img src="crackers2.jpg" alt="missing" height="25%" width="25%" />
  <figcaption>Peppermint Thins</figcaption>
  </figure>
   <figure id="crackers2">
  <img src="crackers2.jpg" alt="missing" height="25%" width="25%" />
  <figcaption>Ritz Crackers</figcaption>
  </figure>
 </div>
</body>
</html>

http://stackoverflow.com/questions/19138758/how-to-align-caption-underneath-image — mplungjan, Dec 01 '15 at 08:07
is it ok if you will use div span then see this http://jsfiddle.net/hgg9h464/3/ — Leo the lion, Dec 01 '15 at 08:09
@YotZin Castrejon check to this http://jsfiddle.net/hgg9h464/4/ — Rohit Azad Malik, Dec 01 '15 at 08:11

score 3 · Accepted Answer · answered Dec 01 '15 at 08:16

3

You have got so many good answers and here's mine also.

If you want to element in same row then you can use float or display:inline-block;. As per your given example see this fiddle or if you are ok with div/span then go with this fiddle.

Be sure when you are using float:left or float:right then you have to use clear:both after using them so there will be no white space issue but display:inline-block is better then float but it depends on user.

answered Dec 01 '15 at 08:16

Leo the lion

3,164
2
22
40

I thank everyone for their great comments it helped a lot. But I believe this one is the best thank you everyone for your input. – Yotzin Castrejon Dec 01 '15 at 08:21

score 1 · Answer 2 · answered Dec 01 '15 at 07:57

1

display: inline-block should do the job. If the two images have different heights, you can add a vertical align.

<style>
figure {
    display: inline-block;
    vertical-align: top
}
</style>

answered Dec 01 '15 at 07:57

Sébastien Maloron

441
2
6

sorry but check here http://jsfiddle.net/hgg9h464/1/ your code is not working..What wrong m doing? – Leo the lion Dec 01 '15 at 07:59
thats the same problem i'm having that leo mentioned. It just stays stacked – Yotzin Castrejon Dec 01 '15 at 08:00

score 0 · Answer 3 · answered Dec 01 '15 at 08:03

Write in css style as below..

#crackers1,#crackers2 {
 Display:inline-block;
  Width:50%; 
  /* do not write float when using display:inline-block.     */
}

#crackers1 img,#crackers2 img{
   Width:100%;
 }

Width:50% would be update as per your requirement. Hope this is helpful.

score 0 · Answer 4 · answered Dec 01 '15 at 08:03

Hi now used to this you just created one div in your image parent as like this

figure {
    display: inline-block;
    vertical-align: top;
    margin:0;
}
.imGSec{white-space:nowrap;}

figure {
    display: inline-block;
    vertical-align: top;
    margin:0;
}
.imGSec{white-space:nowrap;}

<div class="imGSec">
<figure id="crackers1">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8q3x_pFvnepIe7b7C_YeHbbHJe4n1KXKPIgldpccJY1hw3Z8z" alt="missing" height="25%" width="25%" />
  <figcaption>Peppermint Thins</figcaption>
  </figure>
   <figure id="crackers2">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdNkStSLeNk_3eAN6MV7asaOQapylITCIxs1JDOEblIc8V4eqy" alt="missing" height="25%" width="25%" />
  <figcaption>Ritz Crackers</figcaption>
  </figure>
 </div>

can you please share why there is space between those images? — Leo the lion, Dec 01 '15 at 08:04

How to align two images in html/css

4 Answers4