以前来说,单复选框与后跟文字的对其问题其实大多出现在 font-size 为 12px 的场景下。在现在默认和常用的 14px 下其实应该是不会出现的。
随着浏览器的不断发展,对css的支持程度以及不同的实现方式,我们大概要时刻注意相关问题的产生。
场景复现
笔者遇到这个问题还是因为elementUI ——
在我司的一个项目场景中,我们需要判断优惠券的可用时段,有两个选项:不限或是在周一到周末进行选择。它们的排布是这样的:
<div class="form-li fl--cb">
<div class="form-left fl--b">可用时段:</div>
<div class="form-right">
<FormSelect :disabled="isModify" sel_time="可用时段" :use_list="['周一','周二','周三','周四','周五','周六','周日']"></FormSelect>
</div>
</div>
其中 FormSelect 是笔者自己封装的组件,用于在很多地方复用这个场景!
首先,
这里css中对齐用的是 flex 中的align-item: baseline; —— 基于图中的布局要求,我们是不适合用center 或其它属性的。
为什么不用flex-start ?
我们来看一下各自的效果:
-
flex-start:与文档流方向相关。默认表现为容器顶部对齐。
效果:(将鼠标放在控制台元素上)
-
baseline:表现为所有flex子项都相对于flex容器的基线(在容器中放一个字母x,它的下边缘)对齐。
效果:
这样左右两列是对齐了,但是问题来了:你有没有发现在图中文字是和 radio 的按钮有一些高低差异的?
这是因为radio框和文字的“重心”是不一样的 —— 仔细看图中效果的话不难看出:左边文字和右边第一行的文字是对齐的,但是右边文字的radio框却比它们要高出一些!
即使针对上面 flex-start 时的样式,如果将其拿到IE下,我们将控制台 - 布局 - 弹性容器下的按钮打开会看到:
记得张大(@张鑫旭)说过,radio其实并不是单单的一个圈,它和后面的文字有一个默认间距是因为自带一个margin。在IE8前更过分,它其实外部还有一个隐藏的border!
所有单复选框产生的对齐问题基本都是由baseline属性值 造成的!
如何解决
-
有个非常巧妙的方法:字体。将选择框后面的文字字体设置为“Tahoma”,然后修改样式为:(包括下面的所有方法都是针对框本身修改样式)
.xxx{
vertical-align:middle;
margin-top:0;
}
但是我司的css架构在先,字体样式是全局复用的。遵循“极限复用”的思想笔者不能重新设置,这种方法只能作罢。
这种方法忘了在哪看的了,效果出奇,一直记录在案。
-
利用
vertical-align 属性
vertical-align 作用于行内/行内块元素,一般用于“垂直居中”。它的默认值是baseline ,基线对齐。
不同的是,这个属性的负值是控制往下偏移,而正值表示往上偏移。而且数值大小全部都是相对于基线位置计算的!
所以说:vertical-align 是一个偏移属性!它并不能造成绝对的“居中”。但是我们却可以以此来解决像素级的偏差:
.xxx{
vertialc-align:-3px;
}
这种方法以前人人网也用过,效果很好!
特别提示:如果您的项目中使用了 line-height 属性,我也是非常建议你使用 vertialc-align 的:毕竟 vertical-align的百分比值(的计算)取决于元素上的line-height值!
一般来说,对字符来讲,font-size 越大,基线位置越靠下。
-
如果
font-size 值 ≥ 14px ,而且设置了 vertical-align 为 middle ,那么可以试试margin-top 偏移解决:
.xxx{
vertical-align:middle;
margin-top:-2px;
margin-bottom:1px;
}
-
如果设置了height,可以为radio/checkbox框也设置
height (必要时可以加上width属性)。其大小和元素的font-size 值对应(控制台自己根据情况调整):
比如:设置了 font-size:14px; 可设置单复选框的height:13px; 并且为单复选框添加css属性:vertical-align:text-top; 。
|