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

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

問題の説明

ボタンのスタイルはアイコン + テキストです。フレックス レイアウトを使用して垂直方向に中央揃えにすると、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 の簡単な分析

推薦する

JavaScript コードを省略する一般的な方法の概要

目次序文矢印関数一般的な配列操作をマスターするスプレッド演算子オブジェクトの省略形構造化割り当てデー...

mysql8.0.23 Linux (centos7) のインストールの完全かつ詳細なチュートリアル

目次リレーショナルデータベースとは何ですか?非リレーショナルデータベースとは何ですか? MySQL ...

一般的な Linux ディストリビューションのミラーソース構成の概要

最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...

詳細なハードウェア情報を取得するための Linux のいくつかのコマンドの詳細な説明

Linux システム、特にサーバー システムでは、デバイスのハードウェア情報を表示する必要がよくあり...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...

Nodeイベントループの包括的な理解

目次ノードイベントループイベントループ図メインスレッドイベントループタイマーキューの仕組み投票キュー...

MySQL データベースの詳細な説明 (Ubuntu 14.0.4 LTS 64 ビットベース)

1. MySQLデータベースの構成と関連概念まず、MySQL はリレーショナル データベースである...

CSS3で実装されたサムネイルホバー効果

成果を達成する実装コードhtml <ヘッダー> <h1><em>...

MySQLでユーザーを作成し、権限を管理する方法

1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...

MySQLデータベースにパスワードを入力した後にフラッシュバックする問題の解決策

パスワード入力後にMySQLデータベースがクラッシュする問題と解決策1 ケースの説明最近、基本的な機...

CSS スタイルを使用して表のフォントを垂直中央に配置する方法

CSS スタイルを使用して表内のフォントを垂直方向に中央揃えする方法は次のとおりです。下図のようなカ...

Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体

シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...

yum から docker インストール パッケージをダウンロードし、オフライン マシンにインストールする例の詳細なコード

1. ネットワークマシンでは、デフォルトのcentosyumソースを使用します [root@kole...

CSSのtranslate(-50%,-50%)は水平および垂直の中央揃え効果を実現します。

translate(-50%,-50%) 属性:中央に配置するには、長さと幅の 50% だけ上と左...

MySQL カーソルの概念と使用法の詳細な説明

この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...