How to align two images in html/css


Tags: html,css,image,figure

Problem :

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>


Solution :

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.


    CSS Howto..

    How to functionalize countdown?

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    How to set a External SVG color in HTML using CSS?

    How do I make a jQuery animation work across major browsers?

    How can I insert new text with a hyperlink into a page in CSS?

    How to have a textbox with label inside it support 'tap to paste' feature in iPad?

    CSS Keyframes: How to move div to certain position

    How to make a picture responsive that is on wordpress custom post type through HTML/CSS

    How to place div on top of responsive rotated div?

    How to create a similar background to this one

    how to make div shadow only in belly part of box - css

    How to use Firebug to easily find which css file defines a particular style

    How to integrate Thread and

    CSS preprocessors workflow - how does it really work?

    How to turn off visjs active shadow box?

    How can I create left & right side fixed width elements with a center that fills the remainder?

    CSS: how to refer to second child class of a div

    HTML element positioning - How do I have an element always stay in the visible area without javascript

    How to change background color for only one bootstrap popover

    How is this font face in CSS3 embedded into a css file?

    How to select 3rd div which has specific css class

    How to Style CSS Checkboxes with Font Awesome

    How to create custom archive page on Tumblr

    How to keep your current screen position while dynamically showing surrounding elements with jquery / css

    How can i get my slideshow to stop changing size?

    How to fix an image to the bottom right with resizing window?

    How to programmatically add JS and CSS resources to ?

    How generate width html element to fill rest of width window

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    How could I use pseudo-element :after :before conditionally