CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法
|
1. フレックスレイアウト
。父親 {
ディスプレイ: フレックス;
コンテンツの中央揃え: 中央;
アイテムの位置を中央揃えにします。
}
この方法は互換性がありません 2. 位置 + 変換
.息子{
位置: 絶対;
左: 50%;
上位: 50%;
変換: translate(-50%, -50%);
}
IE9以下ではtransform属性をサポートしていません 3. 表 + 表セル
。父親 {
表示: テーブル;
}
.息子{
表示: テーブルセル;
垂直位置合わせ: 中央;
テキスト配置: 中央;
}
4. :before + display:inline-block
。父親 {
テキスト配置: 中央;
}
.father::before {
コンテンツ： '';
表示: インラインブロック;
高さ: 100%;
垂直位置合わせ: 中央;
}
.息子{
表示: インラインブロック;
}
CSS3 の可変高さと幅の垂直および水平中央揃えの使用方法をいくつか紹介したこの記事はこれで終わりです。CSS3 の可変高さと幅の垂直および水平中央揃えの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: CSS のサイズと幅と高さのブラウザ解釈の違いに対する解決策
>>: Vueはプライベートフィルターと基本的な使用法を定義します
推薦する
Vueはechartを使用してラベルと色をカスタマイズします
この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...
左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明
この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...
MySQL インデックスの原理と最適化の詳細な説明
序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...
Vueのレスポンシブシステムの原理の詳細な説明
目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...
MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコード
MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコードMySQL シーケ...
TypeScript での関数オーバーロード
目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...
ウェブページの再設計の7つの主要要素 ウェブページの再設計の7つの主要要素を共有する
Shopify Plus は、私たちが設立した e コマース プラットフォームのエンタープライズ バ...
JavaScriptの記事では、Webフォームの操作方法を説明します。
1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...
ボタンに醜い灰色の枠線が付いています。これを削除するにはどうすればよいですか?
ダイアログをクロージャで使用し、右上隅の向こう側に閉じるボタンがあるダイアログを描画しました。ボタン...
Dockerコンテナデータをコピーしてバックアップする方法の詳細な説明
ここでは、Jenkins コンテナを例に 3 つの方法を紹介します。方法1コンテナをイメージにパッケ...
Linux サーバーに埋め込まれた ddgs および qW3xT.2 マイニング ウイルスの対処の実践記録
序文仮想通貨の狂気的な投機により、マイニングウイルスは犯罪者が最も頻繁に使用する攻撃方法の 1 つに...
VMware15/16 VMwareのロックを解除してMacOSをインストールする詳細な手順
VMware バージョン: VMware-workstation-full-16 VMware バー...
HTML マルチヘッダーテーブルコード
1. マルチヘッダーテーブルコードコードをコピーコードは次のとおりです。 <!DOCTYPE ...
Win7 64 ビット版に MySQL 5.7 をダウンロードしてインストールする際によくある問題の概要
1. 公式ウェブサイトからMySQLをダウンロードします。 これが私たちが探しているものです、win...
検索テキストボックスがフォーカスを外れたときにテキストの位置がジャンプする問題の解決方法
検索テキストボックスにテキストを設定すると、フォーカスを外すと位置がジャンプしますコードをコピーコー...