button內flex垂直居中居然不居中！

問題描述

按鈕樣式爲圖標+文字，在使用flex佈局寫垂直居中時，iphone7手機上文字和圖標卻沒有居中，居左顯示。代碼以下（已精簡）：

<button>
  <img src="./refresh.png" alt />
  {{ confirmButtonText }}
</button>

...
button {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
      width: 36px;
      height: 36px;
      display: inline-block;
  }
}

預期樣式：

實際樣式：

解決方式

給icon和文字外再包一層標籤，給外層標籤設置flex垂直居中樣式，代碼以下：

<button>
  <span class="wrap">
     <img src="./refresh.png" alt />
      {{ confirmButtonText }}
  </span>
</button>

...
button {
   display: flex;
   align-items: center;
   justify-content: center;
  .wrap {
      img {
          width: 36px;
          height: 36px;
          display: inline-block;
      }
  }
}