フレックスインサイドボタンの垂直方向の中央揃えが中央揃えにならない問題の解決方法

問題の説明

ボタンのスタイルはアイコン + テキストです。フレックスレイアウトを使用して垂直方向に中央揃えにすると、iPhone 7 ではテキストとアイコンが中央揃えにならず、左側に表示されます。コードは次のとおりです（簡略化されています）。

<ボタン>
  <img src="./refresh.png" alt />
  {{ 確認ボタンテキスト }}
</ボタン>

...
ボタン {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  画像 {
      幅: 36ピクセル;
      高さ: 36px;
      表示: インラインブロック;
  }
}

期待されるスタイル:

実際のスタイル:

解決

アイコンとテキストの周りに別のラベルのレイヤーをラップし、外側のラベルに flex vertical center スタイルを設定します。コードは次のとおりです。

<ボタン>
  <span class="wrap">
     <img src="./refresh.png" alt />
      {{ 確認ボタンテキスト }}
  </span>
</ボタン>

...
ボタン {
   ディスプレイ: フレックス;
   アイテムの位置を中央揃えにします。
   コンテンツの中央揃え: 中央;
  。包む {
      画像 {
          幅: 36ピクセル;
          高さ: 36px;
          表示: インラインブロック;
      }
  }
}

これで、フレックス垂直センタリング内部ボタンが中央に配置されない問題を解決する方法についての記事は終了です。フレックス垂直センタリング内部ボタンが中央に配置されない問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

>>: Docker コンテナにおける Patroni の簡単な分析