解决img和div高度不同的问题以及iconfont设置line-height仍然不居中

解决方案(任选一种):

1. div设置 font-size:0;

2. img设置 display:block;

3. div设置 display:flex;

4. img设置 vertical-align: middle;

 

原因:
The white space displayed below image elements in HTML is often cause for confusion, but there is a logical explanation: Images are inline elements, and inline elements have descenders.

链接

img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会变高

 

iconfont设置line-height不居中

可以设置父类flex align-items: center; 然后把iconfont display:block; 这样可以解决

下面方法有时可以有时不可以

在设置iconfont的元素设置 

.iconfont {
    vertical-align: middle;
}

 如果不居中就在父元素中使用flex

display: flex;
      align-items: center;
      justify-content: center;

 

posted @   study_php_java_C++  阅读(333)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2020-06-22 微信小程序函数间传递url的参数丢失问题
点击右上角即可分享
微信分享提示