等高的行级div却不在同一条水平线上

原因

1. 基线没有对齐
2. 其中有的div单独设置了对准方式
3. 其中有的div设置定位方式（fixed|absolute）
4. 其中有的div设置浮动

思路

1. div通过inline-block转换行级后，添加vertical-align属性指定对准方式
2. 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，弹性盒子只需在父节点设置即可，而且有更多、更灵活的子节点控制，这里不做赘述。