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: 文字 关于 图片
编辑:申博开户网
m88 188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes 真钱的棋牌游戏 casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 nba英文官网 嘉年华官网 皇冠备用 火箭队官网 中国人论坛 bet 单双公式 博彩资讯网 w88优德 港京印刷图库 澳门足球盘 球盘 娱乐场 联众网站 沙龙365 7080棋牌游戏 真钱 澳门回归日期 大众娱乐网 卡宾官方旗舰店 mg电子 全亚洲首选288x nba即时比分 本港 中国足彩竞猜网 斗地主规则 七星彩论坛图规 网上赌博 单双规律 沈泳 华夏娱乐网 明升备用网址 梦网书城 盈禾国际 明升体育 博狗沃鑫 卡宾官方旗舰 信誉赌场 球探比分网 竞彩论坛空间 三亚娱乐 soutec 北京福利彩票 澳门彩票公司 北京pk10 凤凰 纸牌小游戏 皇冠现金代理 银河国际亚洲首选288x 三六八高手论坛 空中城市 赌球心得 188比分 让球规则 三星娱乐城 诺贝尔娱乐城 今天有nba直播吗 5060全讯网 新世纪 久乐娱乐场 世界杯盘口 易胜博 麻将单机版 华人娱乐总站 财神爷心水论坛 巴特 澳门百利宫 明升 红姐统一主图库 九龙老牌图库 打牌 娱乐王子 娱乐真人 亚豪平台 真人娱乐 飞禽走兽老虎机 188bet下载 博发娱乐城 北单 陈怀生 比分188 百万图库 老挝赌博 pc蛋蛋注册 天上人间娱乐 红姐统一图库 产业新闻网 葡京
相关文章列表
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部