html中img小图标与文字不对齐的解决方式

E-小伍

于 2018-12-04 10:12:59 发布

阅读量8.9k

点赞数 3

分类专栏： html 文章标签：图与文字对齐

本文链接：https://blog.csdn.net/u010618627/article/details/84783744

版权

html 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在CSS布局中实现图标与文字垂直居中对齐的方法，通过调整垂直对齐属性和使用负边距来确保图标与文本在行内元素中对齐一致，避免了常见的对齐偏差问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="a">
    <img src="images/a.png"> 
    <p>干活呢</p>
</div>

.a img {
  width: 20px;
  height: 15px;
  margin: 0px 10px 0 15px;
}

.a p{
    display: block;
    width: calc(100% - 55px);
    height:21px;
    float: right;
    line-height: 21px;
    margin-right: 10px;
}

正常的设置字行高会出现小图标和字略微不对齐的情况，

所以要对图标添加一些小操作

.a img {
    width: 20px;
    height: 15px;
    vertical-align: middle;
    margin: -5px 10px 0 15px;
}

加了一个垂直居中

加了一个上边距的反向定位

效果就这样：

大佬勿喷！！！！