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はプライベートフィルターと基本的な使用法を定義します
推薦する
MySQL データ挿入効率の比較
データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...
LinuxにRocketMQインスタンスをインストールする手順
1. JDKをインストールする1.1 現在の仮想マシン環境にJDKがあるかどうかを確認する rpm ...
JavaScript の setTimeout と setTimeinterval の使用例の説明
どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...
HTML でカスタム画像を使用してチェックボックスを表示する方法
チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...
Docker コンテナのマウントディレクトリ操作の表示
Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...
Windows で mysql 8.0.12 をインストールするための詳細なチュートリアル
この記事では、MySQL 8.0.12のインストール方法に関する詳細なチュートリアルを参考までに紹介...
VMware 仮想マシン ubuntu18.04 インストール チュートリアル
インストール手順1. 仮想マシンを作成する 2. [カスタム（詳細）]を選択し、[次へ]をクリックし...
Windows での Nginx のインストールと環境設定 (nginx をサービスとして実行)
最初で最も重要なステップは、Windows 環境に Ngnix サービスをインストールする方法です。...
Bootstrap が人気な 11 の理由
序文最も人気のあるフロントエンド開発フレームワークである Bootstrap は、Web サイトの開...
仕事の効率を上げるJS略語スキル20選
目次複数の変数を同時に宣言する場合は、1 行に短縮できます。分割代入は複数の変数に同時に値を割り当て...
ubuntu20.04 LTSにdockerをインストールする方法
ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...
MySQL タイムブラインドインジェクションの 5 つの遅延方法
MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...
一般的なDockerコマンドの詳細な説明
1. ヘルプコマンド1. 現在のDockerバージョンを表示する docker バージョン2. イメ...
Mysql 文字列の傍受と指定された文字列内のデータの取得
序文: 正規表現のインターセプションに似た、MySql フィールドの文字列から特定の文字を抽出すると...
Html、sHtml、XHtml の違いのまとめ
たとえば、<u>には終了文字がなく、ブラウザはそれを認識します。 SHTML は Ser...