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     lt div class  image123  gt       lt img src   images tv gif  height  200  width  200  style  float left  gt       lt p gt This is image 1 lt  p gt       lt img class  middle-img  src   images tv gif   height  200  width  200  gt       lt p gt This is image 2 lt  p gt       lt img src   images tv gif   height  200  width  200  gt       lt p gt This is image 3 lt  p gt   lt  div gt

User · Answer

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     lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta charset utf-8   gt     lt title gt  lt  title gt     lt style gt      div container         display inline-block             p         text-align center           lt  style gt   lt  head gt   lt body gt     lt div class  container  gt       lt img src  http   placehold it 350x150  height  200  width  200    gt       lt p gt This is image 1 lt  p gt     lt  div gt     lt div class  container  gt       lt img class  middle-img  src  http   placehold it 350x150   height  200  width  200    gt       lt p gt This is image 2 lt  p gt     lt  div gt     lt div class  container  gt       lt img src  http   placehold it 350x150  height  200  width  200    gt       lt p gt This is image 3 lt  p gt     lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

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    lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset  utf-8  gt   lt title gt  lt  title gt   lt style gt     container         display inline-block       lt  style gt   lt  head gt   lt body gt      lt div class  container  gt       lt figure gt       lt img src  http   placehold it 350x150  height  200  width  200  gt       lt figcaption gt This is image 1 lt  figcaption gt       lt  figure gt        lt figure gt       lt img class  middle-img  src  http   placehold it 350x150   height  200  width  200  gt       lt figcaption gt This is image 2 lt  figcaption gt       lt  figure gt        lt figure gt       lt img src  http   placehold it 350x150  height  200  width  200  gt       lt figcaption gt This is image 3 lt  figcaption gt       lt  figure gt      lt  div gt   lt  body gt   lt  html gt

User · Answer

You mean something like this     lt div class  image123  gt       lt div class  imgContainer  gt           lt img src   images tv gif  height  200  width  200   gt           lt p gt This is image 1 lt  p gt       lt  div gt       lt div class  imgContainer  gt           lt img class  middle-img  src   images tv gif   height  200  width  200   gt           lt p gt This is image 2 lt  p gt       lt  div gt       lt div class  imgContainer  gt            lt img src   images tv gif   height  200  width  200   gt           lt p gt This is image 3 lt  p gt       lt  div gt   lt  div gt    with the imgContainer style as    imgContainer      float left      Also see this jsfiddle

User · Answer

I suggest to use a container for each img p like this    lt div class  image123  gt       lt div style  float left margin-right 5px   gt           lt img src   images tv gif  height  200  width  200     gt           lt p style  text-align center   gt This is image 1 lt  p gt       lt  div gt       lt div style  float left margin-right 5px   gt           lt img class  middle-img  src   images tv gif   height  200  width  200    gt           lt p style  text-align center   gt This is image 2 lt  p gt       lt  div gt       lt div style  float left margin-right 5px   gt           lt img src   images tv gif   height  200  width  200    gt           lt p style  text-align center   gt This is image 3 lt  p gt       lt  div gt   lt  div gt    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   lt div class  image123  gt       lt div gt           lt img src   images tv gif    gt           lt p gt This is image 1 lt  p gt       lt  div gt       lt div gt           lt img class  middle-img  src   images tv gif     gt           lt p gt This is image 2 lt  p gt       lt  div gt       lt div gt           lt img src   images tv gif     gt           lt p gt This is image 3 lt  p gt       lt  div gt   lt  div gt    css  div      float left      margin-right 5px     div  gt  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

User · Answer

In your CSS    image123  float left

User · Answer

Try this   CSS   imageContainer       float  left     p       text-align  center      HTML   lt div class  image123  gt       lt div class  imageContainer  gt           lt img src   images tv gif  height  200  width  200    gt           lt p gt This is image 1 lt  p gt       lt  div gt       lt div class  imageContainer  gt           lt img class  middle-img  src   images tv gif   height  200  width  200    gt           lt p gt This is image 2 lt  p gt       lt  div gt       lt div class  imageContainer  gt               lt img src   images tv gif   height  200  width  200   gt           lt p gt This is image 3 lt  p gt       lt  div gt   lt  div gt

User · Answer

Try using this format    lt figure gt      lt img src  img  alt  The Pulpit Rock  width  304  height  228  gt      lt figcaption gt Fig1  - A view of the pulpit rock in Norway  lt  figcaption gt   lt  figure gt    This will give you a real caption  just add the 2nd and 3rd imgs using Float left like others suggested

[html] align images side by side in html

Examples related to html

Examples related to css

Examples related to alignment