HTML5源码网 - 最专业的HTML5模板设计、免费HTML5模板、整站HTML5网站提供商

服务项目 关于我们 联系我们 模板定制 怎么付款

专业的HTML5模板开发商 -HTML5模板网

HTML5模板 > 网站教程 > 网页设计 > 关于图片与文字垂直方向不对齐问题的解决方法
栏目分类
意见反馈

可以将问题或建议反馈给我们。

提交在线反馈
热点内容

关于图片与文字垂直方向不对齐问题的解决方法

html5模板 html5模板网(www.html5code.net) 2017-10-20 00:08 浏览次数:

前言

可能很多人一开始学前端时都会觉得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;}

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

总结

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

转载请注明:html5模板网(最专业的html5模板定制开发资源站)

以下模板您可能也喜欢


Copyright © 2012-2014 WWW.HTML5CODE.NET. HTML模板网 版权所有并保留所有权 粤ICP备13013007号-4

最专业的html5模板设计、html5网站二次开发、html5源码网-感谢织梦系统提供强大网站内核支持