<div style="margin-left: 20px;">
<button class="bt1">按钮1</button>
<button class="bt2">按钮2</button>
<button class="bt3">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAShJREFUOE+l0zErhlEYxvGfL6DewagMJiajzRcwGCiLDEomGaRMJiWDTFJIFoPB4AvYjDYLgzIarDa66hyd98lLcddT5z3P9fzvc93neof8s4Z++H4G1+X9HG6/03YBE1jADgJoK4APTOKhvmgB+fgOK7jAEl6LcKTZO8F0hbSA0NP96pexzGMYp9F1LbxgtAFUG63/Pk0FVOEYzgvgDZtlvY9eWS/juaxvKyDiTDqVbjnmFLbL3i7ui73aLDfU6wJCzhPRODKwVAb7VOA5ZZ4+QKUuYrWxcFTWa42FY1x2LdS55SbawcZKqr2ZA2x8l4P2GpOJr7AUcd0LNGFK2Pq61SCtI0c/Q7qlHvGOWDkcFKQIA5nF3oAob+FmUJS7AfzTn6kL+fX3Jy7uPhHcIWnMAAAAAElFTkSuQmCC" >
按钮3
</button>
<button class="bt4">按钮4</button>
</div>
<style>
button {
font-size: 20px;
border-top: 2px solid red;
height: 32px;
}
.bt3 {
/* vertical-align: middle; */
}
.bt3 img {
height: 23px;
background-color: red;
}
</style>
![](https://img.haomeiwen.com/i12602393/d2c65593c058706c.png)
可以看到按钮在垂直方向是没有对齐的
如果把代码改成下面这样:
<div style="margin-left: 20px;">
<button class="bt1">按钮1</button>
<button class="bt2">按钮2</button>
<button class="bt3">
按钮3
</button>
<button class="bt4">按钮4</button>
</div>
<style>
button {
font-size: 20px;
border-top: 2px solid red;
height: 32px;
}
.bt3 {
vertical-align: middle;
}
.bt3 img {
height: 23px;
background-color: red;
}
</style>
![](https://img.haomeiwen.com/i12602393/59e03cb5881b5801.png)
可以看到把img隐藏, bt3添加vertical-align: middle
也是无济于事.
这是因为button默认的vertical-align
是baseline
, 而button总是要保证它里面的内容是垂直居中的, 所以bt3只能发生偏移
改成下面这样, 使用vertical-align: top
就能让bt3对齐了, 接下来只要再居中bt3里的内容就行
<div style="margin-left: 20px;">
<button class="bt1">按钮1</button>
<button class="bt2">按钮2</button>
<button class="bt3">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAShJREFUOE+l0zErhlEYxvGfL6DewagMJiajzRcwGCiLDEomGaRMJiWDTFJIFoPB4AvYjDYLgzIarDa66hyd98lLcddT5z3P9fzvc93neof8s4Z++H4G1+X9HG6/03YBE1jADgJoK4APTOKhvmgB+fgOK7jAEl6LcKTZO8F0hbSA0NP96pexzGMYp9F1LbxgtAFUG63/Pk0FVOEYzgvgDZtlvY9eWS/juaxvKyDiTDqVbjnmFLbL3i7ui73aLDfU6wJCzhPRODKwVAb7VOA5ZZ4+QKUuYrWxcFTWa42FY1x2LdS55SbawcZKqr2ZA2x8l4P2GpOJr7AUcd0LNGFK2Pq61SCtI0c/Q7qlHvGOWDkcFKQIA5nF3oAob+FmUJS7AfzTn6kL+fX3Jy7uPhHcIWnMAAAAAElFTkSuQmCC" >
按钮3
</button>
<button class="bt4">按钮4</button>
</div>
<style>
button {
font-size: 20px;
border-top: 2px solid red;
height: 32px;
}
.bt3 {
vertical-align: top;
/* vertical-align: bottom; */
}
.bt3 img {
height: 23px;
background-color: red;
}
</style>
![](https://img.haomeiwen.com/i12602393/61b0acce0ab1e8e7.png)
网友评论