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

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

問題の説明

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

推薦する

onfocus="this.blur()" は視覚障害のあるウェブマスターに嫌われている

スクリーン リーダー ソフトウェアの操作ページについて話しているとき、彼はフロントエンドの学生たちに...

Vueで複数の添付ファイルをアップロードする実装例

目次序文コアコードコードのファイル表示部分序文この記事では主に、Vue プロジェクトでの添付ファイル...

CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法

div で background-color と background-image を同時に設定する...

HTML マークアップ言語 - フォーム

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

CSS で中空効果を実装するサンプルコード

効果原理主にCSSグラデーションを使用して、切り取りを必要としない背景のくり抜きを実現します。クーポ...

K8Sの高度な機能を理解するための記事

目次K8Sの高度な機能高度な機能要約するkubectl サービスの問題のトラブルシューティングK8S...

この記事ではMySQLのNULLについて説明します。

目次序文MySQL の NULL 2 NULL占有長3 NULL値の比較4SQLはNULL値を処理す...

Windows 2008 Server サブドメインを親ドメインに追加すると、ドメインが既に存在するというエラー メッセージが表示されます。

Windows 2008 Serverのサブドメインを親ドメインに参加させると、「ドメインは既に存...

RabbitMQ の Docker インストールと設定手順

目次単一マシンの展開オンラインプルミラーを見るRabbitMQを作成して実行するMQコンテナを正常に...

MySQL InnoDBストレージエンジンについて簡単に説明します

序文:ストレージ エンジンはデータベースの中核です。MySQL の場合、ストレージ エンジンはプラグ...

Linux で固定 IP を設定する方法 (テスト済みで効果的)

まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...

CentOS 7 に Percona Server+MySQL をインストールする

1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...

Linux 継続的インテグレーションで Maven を自動的にインストールする方法

Mavenパッケージを解凍する tar xf apache-maven-3.5.4-bin.tar....

nginx プロキシ サーバーで双方向証明書検証を構成する方法

証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...

MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法

EXPLAIN ステートメントは、MySQL クエリ ステートメント プロセスと EXPLAIN ス...