在html中并排对齐图像 [英] align images side by side in html

问题描述

我想要3个图像并排带有标题，目前我有3个图像从上到下，左边的标题，而不是中心。如何使图像与中间的标题并排显示？谢谢。

 < div class =image123> 
< img src =/ images / tv.gifheight =200width =200style =float：left> 
< p>这是图片1< / p> 
< img class =middle-imgsrc =/ images / tv.gif/ height =200width =200> 
< p>这是图片2< / p> 
< img src =/ images / tv.gif/ height =200width =200> 
< p>这是图片3< / p> 
< / div> 
  

解决方案

 < div class =image123> 
< div class =imgContainer> 
< img src =/ images / tv.gifheight =200width =200/> 
< p>这是图片1< / p> 
< / div> 
< div class =imgContainer> 
< img class =middle-imgsrc =/ images / tv.gif/ height =200width =200/> 
< p>这是图片2< / p> 
< / div> 
< div class =imgContainer> 
< img src =/ images / tv.gif/ height =200width =200/> 
< p>这是图片3< / p> 
< / div> 
< / div> 
 

imgContainer样式为

  .imgContainer {
 float：left; 
} 
  

另请参阅 jsfiddle 。

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>

解决方案

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.

这篇关于在html中并排对齐图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！