1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル]フレックス内のボタンを縦に中央寄せにしない意外な解決法

2022-02-03 12:07:59

問題の説明

ボタンのスタイルがアイコン+テキストで、フレックスレイアウトで縦方向の中央寄せを書くと、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;
  }
}



期待されるスタイル

実際のスタイル

解決方法

アイコンとテキストの外側にもう1層タグを記述し、外側のタグにフレックス垂直センタリングスタイルを設定する、以下のコードを記述します。

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



今回紹介したのは、ボタンのフレックスの垂直中央寄せの問題解決に関する記事ですが、もっと関連する、ボタンのフレックスの垂直中央寄せの内容が中央寄せになっていない場合は、スクリプトハウスの過去記事を検索するか、引き続き以下の関連記事を閲覧してください、今後とも、よりスクリプトハウスを応援していただければ幸いです!。