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: 文字 关于 图片
修改:申博开户网
关于咱们 | 联络咱们 | 友情链接 | 12bet | Sitemap | App | 回来顶部