img-icon导致按钮不对齐的原因分析
这是一个小伙伴发来的demo
他说啊只要给按钮里加上这个小图片
整个这个按钮就会跟其他按钮不对齐
即便呢
他给这个按钮加一个vertical等于middle
大家看
他就跑下边来了还是不对齐
那其实啊不光是这个小图片
我们先把图片注释掉
现在是正常的对吧
但是呢
如果我们给他用文字加一个vertical-align
等于middle
大家看他还是会往下跑
那文字加上vertical-align:middle它会往下跑
咱们上一期视频讲过
那为什么里边的文字往下跑之后
外边的按钮也跟着往下跑呢
我先把这个小图片恢复回来
（把这个先关掉）
然后把这个middle也去掉
大家看现在这种情况哈
那我先把它选中
大家注意看
其实啊从这个边缘到下边这块
在Button里
它是保持了一个垂直居重的状态
我为什么提这个呢
因为
这个Button上下偏移是跟这个有关系的
主要有两点决定因素
第一点就是button这个元素比较特殊
它会永远让里边的内容啊
保持一个垂直居中的状态
这个咱们一会试一下
第二个因素呢
就是这个button自身的vertical-align
等于baseline
也就是说
他要保持里边的内容是在整行
的贝斯兰对齐上
何以见得呢
我们可以测一下
我们在这加1个x x在这加1个x x
然
然后呢我们在这加1个background-color
我们来看一下啊
他们呀都是在这条贝斯兰上对齐的
有了这两点因
素呢大家看
里边的内容虽然向上偏移了
但是对于这个button来说
他既要保持里边的内容在baseline上
还要保持他们（整体在内部）垂直居中
所以外边的button会跟着也向上偏移
所以啊这种场景下
我们可以这样给这个button啊
加一个vertical-align
等于top什么意思呢
就是我们让这个button啊
保持跟整行的顶端对齐
保持这样的对齐这样就没问题了
至于说里边的这个小图片
怎么跟文字保持一个
比较好看的对齐状态
这个咱们前两期视频讲过
大家可以翻看一下
最后啊咱们再来验证一下
关于button里边内容垂直居中的问题
其实很好验证
我们在这儿
写个div然后里面写个button
大家看现在是这样的
然后呢我把它调高一点
height等于比如
看看垂直居中
所以它总是垂直居中的
我再给它加一个br
打开它总是让里边的内容垂直居中
最后更新于