快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

html中如何解决图片与文字垂直方向不对齐问题-创新互联

这篇文章主要介绍html中如何解决图片与文字垂直方向不对齐问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了牧野免费建站欢迎大家使用!

比如说,现在我要做一个简单的删除按钮,只由一个icon和“删除”两个字组成,你会如何布局,给你30秒时间考虑。

好,先亮出HTML代码如下:

删除

很简单,就是一个class为del的div元素下有两个span标签,当然icon你也可以直接用伪元素代替(还不知道伪元素的面壁思过去...)。

接下来你可能会这么写CSS:

.del{ font-size: 18px;}
.del .icon{ display: inline-block; width: 16px; height: 24px; margin-right: 5px;
background: url("imgs/delete.png") no-repeat center; background-size: 100%;}

然后它就变成这个样子了:

html中如何解决图片与文字垂直方向不对齐问题

咦?好像跟想象的不太一样啊!为什么图片和文字垂直方向上不能对齐呢?Why?

这是因为图片和文字在行内垂直方向默认是以基线(baseline)对齐的,图片基线在图片底部,而文字基线却在文字中点偏下的位置,所以才会显示成上图的样子。那么这个问题该如何解决呢?

很简单,我们只需给图片和文字分别加上 vertical-align: middle即可:

.del .icon{ display: inline-block; width: 18px; height: 24px; margin-right: 5px; 
vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}

这样的话,图片和文字就以其中心线对齐了:

html中如何解决图片与文字垂直方向不对齐问题

说到这里,其实本文基本已经结束了,但是经过本人亲测发现,在移动端却会发现图片和文字又会出现不对齐的情况了,但这只是部分浏览器出现的兼容性问题,解决方法也是有的,就是在设置文字字体大小和icon大小时尽量设置为5的整数倍,并尽量让icon高度与字体大小相同。那么本例的代码将写成下面这样:

.del{ font-size: 20px;}
.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 5px;
 vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}

这样基本也没有什么问题了

以上是“html中如何解决图片与文字垂直方向不对齐问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


当前名称:html中如何解决图片与文字垂直方向不对齐问题-创新互联
文章URL:http://6mz.cn/article/dehese.html

其他资讯