align images side by side in html

Question

I want 3 images side by side with caption, at the moment I have 3 images going from top to bottom, with the caption on the left, not on the centre. How do I make the images appear side by side with caption in the middle? Thanks.

<div class="image123">
    <img src="/images/tv.gif" height="200" width="200" style="float:left">
    <p>This is image 1</p>
    <img class="middle-img" src="/images/tv.gif"/ height="200" width="200">
    <p>This is image 2</p>
    <img src="/images/tv.gif"/ height="200" width="200">
    <p>This is image 3</p>
</div>

possible duplicate of [CSS - center two images in css side by side](http://stackoverflow.com/questions/11819417/css-center-two-images-in-css-side-by-side) — Liam, Jul 10 '14 at 15:18
Possible duplicate of [Display two images side by side on an HTML Page](http://stackoverflow.com/questions/2839318/display-two-images-side-by-side-on-an-html-page) — Box Box Box Box, Feb 10 '16 at 11:36

score 23 · Answer 1 · edited Feb 10 '16 at 11:59

23

You mean something like this?

<div class="image123">
    <div class="imgContainer">
        <img src="/images/tv.gif" height="200" width="200"/>
        <p>This is image 1</p>
    </div>
    <div class="imgContainer">
        <img class="middle-img" src="/images/tv.gif"/ height="200" width="200"/>
        <p>This is image 2</p>
    </div>
    <div class="imgContainer">
         <img src="/images/tv.gif"/ height="200" width="200"/>
        <p>This is image 3</p>
    </div>
</div>

with the imgContainer style as

.imgContainer{
    float:left;
}

Also see this jsfiddle.

edited Feb 10 '16 at 11:59

kisp

6,402
3
21
19

answered Jul 10 '14 at 15:11

James

4,146
1
20
35

thank you, but how come you dont mention the class in the CSS page, how does the div in the CSS page know you are referring to image class="image123". Also do you know how to put text in centre of image? – user3809938 Jul 10 '14 at 15:19
1

If your going to use float to do this you should clear it too, save yourself a whole world of pain further down the line. Personally I think display:block is a better solution to this problem. floats should be used sparingly and where there is an alternative, not at all. – Liam Jul 10 '14 at 15:20
1

I didn't use the image123 or middle-img classes. I should have taken them out. I'm not sure what you mean by text in the centre of the image, do you mean so that it is on top of the image? @Liam Thanks for your tips, I never knew about floated items not adding to their parents height, that explains why I've seen that from time to time! What's the advantage of clearing over giving the parent auto overflow? It seems messy to be adding an extra div? – James Jul 10 '14 at 15:32
1

Overflow:auto is a method of clearing floats. [There are a couple.](http://www.quirksmode.org/css/clearing.html) – Liam Jul 10 '14 at 15:54
Also my comment above should read `display:inline-block`...?! – Liam Jul 10 '14 at 15:55
8 years further on and someone upvoted this bringing me back here. I would certainly recommend using `inline-block` as @Liam suggested rather than `float: left` everywhere here (horrible). – James Mar 22 '22 at 10:47
1

or better yet, in 2022, use [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) @James – Liam Mar 22 '22 at 11:32
@Liam gimme 8 years and I'll get there. – James Mar 23 '22 at 10:09
How do you make content **after** images be displayed in the usual vertical way? – mercury0114 Feb 18 '23 at 11:49

score 8 · Answer 2 · edited Dec 22 '22 at 12:34

8

Not really sure what you meant by "the caption in the middle", but here's one solution to get your images appear side by side, using the excellent display:inline-block :

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset=utf-8 />
      <title></title>
      <style>
        div.container {
          display:inline-block;
        }
    
        p {
          text-align:center;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <img src="http://placehold.it/350x150" height="200" width="200" />
        <p>This is image 1</p>
      </div>
      <div class="container">
        <img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200" />
        <p>This is image 2</p>
      </div>
      <div class="container">
        <img src="http://placehold.it/350x150" height="200" width="200" />
        <p>This is image 3</p>
      </div>
    </div>
    </body>
    </html>

edited Dec 22 '22 at 12:34

Engineer S. Saad

378
4
19

answered Jul 10 '14 at 15:14

Pierre-Adrien

2,836
29
30

Yes, I would recommend this over floats. – Michael Jul 10 '14 at 15:15
hello, do you know if it is possible to change the font of the text under the image? Would I have to use CSS. – user3809938 Jul 10 '14 at 16:18
@user3809938 : hi, maybe you should have a look at CSS basics, don't you think ? And more specifically to [font-family](https://developer.mozilla.org/en/docs/Web/CSS/font-family). Guess that wouldn't hurt. – Pierre-Adrien Jul 10 '14 at 16:21

score 4 · Answer 3 · answered Jul 10 '14 at 15:20

4

Try using this format

<figure>
   <img src="img" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

This will give you a real caption (just add the 2nd and 3rd imgs using Float:left like others suggested)

answered Jul 10 '14 at 15:20

DarkNinja955

197
8

Bear in mind this is [very badly supported in IE browsers](http://caniuse.com/html5semantic) – Liam Jul 10 '14 at 15:22

score 2 · Answer 4 · edited May 23 '17 at 10:31

I suggest to use a container for each img p like this:

<div class="image123">
    <div style="float:left;margin-right:5px;">
        <img src="/images/tv.gif" height="200" width="200"  />
        <p style="text-align:center;">This is image 1</p>
    </div>
    <div style="float:left;margin-right:5px;">
        <img class="middle-img" src="/images/tv.gif/" height="200" width="200" />
        <p style="text-align:center;">This is image 2</p>
    </div>
    <div style="float:left;margin-right:5px;">
        <img src="/images/tv.gif/" height="200" width="200" />
        <p style="text-align:center;">This is image 3</p>
    </div>
</div>

Then apply float:left to each container. I add and 5px margin right so there is a space between each image. Also alway close your elements. Maybe in html img tag is not important to close but in XHTML is.

fiddle

Also a friendly advice. Try to avoid inline styles as much as possible. Take a look here:

html

<div class="image123">
    <div>
        <img src="/images/tv.gif" />
        <p>This is image 1</p>
    </div>
    <div>
        <img class="middle-img" src="/images/tv.gif/" />
        <p>This is image 2</p>
    </div>
    <div>
        <img src="/images/tv.gif/" />
        <p>This is image 3</p>
    </div>
</div>

css

div{
    float:left;
    margin-right:5px;
}

div > img{
   height:200px;
    width:200px;
}

p{
    text-align:center;
}

It's generally recommended that you use linked style sheets because:

They can be cached by browsers for performance
Generally a lot easier to maintain for a development perspective

source

fiddle

score 1 · Answer 5 · edited Feb 10 '16 at 12:38

Try this.

CSS

.imageContainer {
    float: left;
}

p {
    text-align: center;
}

HTML

<div class="image123">
    <div class="imageContainer">
        <img src="/images/tv.gif" height="200" width="200" />
        <p>This is image 1</p>
    </div>
    <div class="imageContainer">
        <img class="middle-img" src="/images/tv.gif"/ height="200" width="200" />
        <p>This is image 2</p>
    </div>
    <div class="imageContainer">    
        <img src="/images/tv.gif"/ height="200" width="200"/>
        <p>This is image 3</p>
    </div>
</div>

score 0 · Answer 6 · answered Nov 10 '15 at 17:11

Here is how I would do it, (however I would use an external style sheet for this project and all others. just makes things easier to work with. Also this example is with html5.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
  .container {
      display:inline-block;
  }
</style>
</head>
<body>

  <div class="container">
    <figure>
    <img src="http://placehold.it/350x150" height="200" width="200">
    <figcaption>This is image 1</figcaption>
    </figure>

    <figure>
    <img class="middle-img" src="http://placehold.it/350x150"/ height="200" width="200">
    <figcaption>This is image 2</figcaption>
    </figure>

    <figure>
    <img src="http://placehold.it/350x150" height="200" width="200">
    <figcaption>This is image 3</figcaption>
    </figure>

  </div>
</body>
</html>

score -1 · Answer 7 · answered Jul 10 '14 at 15:12

-1

In your CSS:

.image123{
float:left;
}

answered Jul 10 '14 at 15:12

ModerateCarrot

289
1
2
12

align images side by side in html

7 Answers7

Linked