在html中并排对齐图像

前端之家收集整理的这篇文章主要介绍了在html中并排对齐图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要3张图片并排的标题,在这一刻,我有3张图像从上到下,标题在左边,而不是在中心.如何使图像与中间的标题并排显示?谢谢.
<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>

解决方法

你的意思是这样的?
<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>

与imgContainer风格一样

.imgContainer{
    float:left;
}

也可以看这个jsfiddle.

原文链接:https://www.f2er.com/html/224461.html

猜你在找的HTML相关文章