How to align two images in html/css

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>

Answers


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.


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>

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.


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>

Need Your Help

Silverlight data-driven application with NHibernate

c# .net wcf silverlight mvvm

this is more of a subjective Question, but I'll ask it anyway.

Centering and adding on hover and on click event to CSS3 button

html css

I've just developed a CSS3 button via http://css3button.net/36045 and I was wondering how do I go about adding on hover and on click state changes (i.e defining the correct colours that go with the