align images side by side in html
alignment, css, html
Solution
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.
Problem
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> ```