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>
You have got so many good answers and here's mine also.
Be sure when you are using
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.