問題の説明 ボタンのスタイルはアイコン + テキストです。フレックス レイアウトを使用して垂直方向に中央揃えにすると、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 の簡単な分析
目次序文矢印関数一般的な配列操作をマスターするスプレッド演算子オブジェクトの省略形構造化割り当てデー...
目次リレーショナルデータベースとは何ですか?非リレーショナルデータベースとは何ですか? MySQL ...
最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...
Linux システム、特にサーバー システムでは、デバイスのハードウェア情報を表示する必要がよくあり...
目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...
目次ノードイベントループイベントループ図メインスレッドイベントループタイマーキューの仕組み投票キュー...
1. MySQLデータベースの構成と関連概念まず、MySQL はリレーショナル データベースである...
成果を達成する実装コードhtml <ヘッダー> <h1><em>...
1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...
パスワード入力後にMySQLデータベースがクラッシュする問題と解決策1 ケースの説明最近、基本的な機...
CSS スタイルを使用して表内のフォントを垂直方向に中央揃えする方法は次のとおりです。下図のようなカ...
シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...
1. ネットワークマシンでは、デフォルトのcentosyumソースを使用します [root@kole...
translate(-50%,-50%) 属性:中央に配置するには、長さと幅の 50% だけ上と左...
この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...