img在div中居中

最新推荐文章于 2023-07-25 12:40:55 发布

SalmonellaVaccine

最新推荐文章于 2023-07-25 12:40:55 发布

阅读量958

点赞数

分类专栏： CSS HTML

CSS 同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

HTML

59 篇文章 0 订阅

订阅专栏

http://jsfiddle.net/kizu/4RPFa/4570/

<div class=frame>
    <span class="helper"></span><img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=250 />
</div>
<div class=frame>
    <span class="helper"></span><img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=25 />
</div>
<div class=frame>
    <span class="helper"></span><img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=23 />
</div>
<div class=frame>
    <span class="helper"></span><img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=21 />
</div>
<div class=frame>
    <span class="helper"></span><img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=19 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=17 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=15 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=13 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=11 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=9 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=7 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=5 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/5bc7ff3bfb2bb09e7d665a976e7e7ec1.png" height=3 />
</div>

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}