img icon导致按钮对不齐问题

  <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>

可以看到按钮在垂直方向是没有对齐的
如果把代码改成下面这样:

  <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>

可以看到把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>

最后编辑于：2023.03.10 12:35:53