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

Answer 1

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

    

        
        
This is image 1
    
    

        
        
This is image 2
    
    

        
        
This is image 3
    

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

    

        
        
This is image 1
    
    

        
        
This is image 2
    
    

        
        
This is image 3
    

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