cvmachine.com - 申博开户网

搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯:如何解决图片与文字垂直方向不对齐的问题?

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

2017-11-22 11:06:34 来源:www.cvmachine.com 【

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

前言

可能很多人一开始学前端时都会觉得CSS简单,没错,CSS没有语言逻辑,入门确实很简单,可要是想深入挖掘的话……嘿嘿,水可深着呢!

就比如说今天要跟大家分享的这个,表面上看可能觉得也没多大问题,但是就是这个不太起眼的“小玩意”,困扰了我很久……下面话不多说了,来一起看看详细的介绍吧。

接下来我们步入正题~~

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

好,先亮出HTML代码如下:

<div class="del"><span class="icon"></span><span>删除</span></div>

很简单,就是一个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%;}

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

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

咦?好像跟想象的不太一样啊!为什么图片和文字垂直方向上不能对齐呢?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;}

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

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

说到这里,其实本文基本已经结束了,但是经过本人亲测发现,在移动端却会发现图片和文字又会出现不对齐的情况了,但这只是部分浏览器出现的兼容性问题,解决方法也是有的,就是在设置文字字体大小和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;}

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对申博开户的支持。


本文地址:http://www.cvmachine.com/dnjc/94051.html
Tags: 文字 关于 图片
编辑:申博开户网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部
m88.com m88 vwin 188bet uedbet 威廉希尔 vwin 明升 bwin 明升88 bodog bwin 明升m88.com m88 18luck 188bet 博狗 澳门金沙 澳门彩票 unibet unibet Ladbrokes Ladbrokes 12bet 真钱的棋牌游戏 皇冠娱乐 casino casino m88明升 明升88 明升 明升 明升 明升 m88.com m88.com