原因
- 基线没有对齐
- 其中有的div单独设置了对准方式
- 其中有的div设置定位方式(fixed|absolute)
- 其中有的div设置浮动
思路
- div通过inline-block转换行级后,添加vertical-align属性指定对准方式
- div通过弹性盒子flex转换子节点行级后,父添加align-items属性指定对齐方式
方案1
CSS:
.bank-box .bank-change .bank-icon {
width: 1.5rem;
height: 1.5rem;
background-image: url(../images/change.png);
background-size: cover;
display: inline-block;
}
页面:
.bank-box .bank-change .bank-icon {
width: 1.5rem;
height: 1.5rem;
background-image: url(../images/change.png);
background-size: cover;
display: inline-block;
vertical-align: top;
}
前后效果可自行对比
方案2
// 父级
.bank-box .bank-change {
display: flex;
align-items: center; // 垂直对齐方式
// justify-content: center // 水平对齐方式
}
// 子级
.bank-box .bank-change .bank-icon {
width: 1.5rem;
height: 1.5rem;
background-image: url(../images/change.png);
background-size: cover;
// align-self: center; // 你也可以单独指定某个子级的垂直对齐方式
// justify-self: center; // 你也可以单独指定某个子级的水平对齐方式
}
效果如下
总结
除了上诉两种方法外,你还可以通过浮动、定位、设置行高等方式来实现垂直对齐。
但这样做可能会影响你的布局:浮动记得要在合适的节点及时清除clear:float,不然会出现很多奇奇怪怪的布局问题。
定位要记得控制层级,还要尽量控制在父节点内position: relative,还要注意显示权重z-index。
所以我更推荐上述两种方式,其中以弹性盒子的方式最为推荐。
相较于inline-block,弹性盒子只需在父节点设置即可,而且有更多、更灵活的子节点控制,这里不做赘述。