[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;
}
}
}
今回紹介したのは、ボタンのフレックスの垂直中央寄せの問題解決に関する記事ですが、もっと関連する、ボタンのフレックスの垂直中央寄せの内容が中央寄せになっていない場合は、スクリプトハウスの過去記事を検索するか、引き続き以下の関連記事を閲覧してください、今後とも、よりスクリプトハウスを応援していただければ幸いです!。
関連
-
[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル】CSS擬似要素::マーカー解説
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[CSSチュートリアル]ドラッグ&ドロップ効果を実現するピュアCSSコード
-
cssにおけるpx, em, rem, ptの特徴や違い、変換の詳細について
-
[css3]CSS3ベジェ曲線サンプル:リンクホバーアニメーション効果の作成
-
[css3] css3の擬似クラスについて、共通使用前と共通使用後で説明する。
-
[CSSチュートリアル】CSS clear float clear:both サンプルコード
-
[CSSチュートリアル】ピュアCSS3による水平無限スクロールのサンプルコード
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSS たった1行のコードでアバターと国旗の一体化を実現
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[CSSチュートリアル】CSS3で3つの効果例の背景をぼかす。
-
[CSSチュートリアル】空間均等性の問題を解決する2つの方法
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[CSSチュートリアル】ホバードロップダウンメニュー方式を実現するCSS
-
[CSSレイアウト例】等間隔の四角形で完璧なページレイアウトを実現する方法
-
[CSSチュートリアル】CSS擬似クラス:empty makes my eyes shine(コード例)
-
[CSSチュートリアル]マウスをスライドさせてカードを浮かせるCSSの例
-
[CSSチュートリアル】CSSでデータホットスポット効果を実現する方法