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はプライベートフィルターと基本的な使用法を定義します
推薦する
テキストの両側に水平線を描くための CSS のサンプルコード
この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...
5分でDockerをインストールする詳細な手順
CentOS に Docker をインストールするには、オペレーティング システムが CentOS ...
MySQL InnoDBエンジンのインデックスとストレージ構造の詳細な説明
序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...
QQtabBar による CSS 命名仕様 BEM の詳細な紹介
QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...
HTMLからPDFへのスクリーンショット保存機能の実装
テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...
ソフトウェア テスト - MySQL (VI: データベース関数)
1.MySQL関数1. 数学関数PI() # 円周率 (pi) の値を返します。デフォルトの小数点...
Linux でのファイルの編集、保存、終了の実践的な説明
Linux でファイルを編集した後、保存して終了するにはどうすればよいですか?保存して終了するコマン...
Dockerコンテナのいくつかの保存方法の詳細な説明
目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...
CSS疑似クラス名を数字で始めないでください
初心者が div+css を開発する場合、.ggg、#ccc などの形式の CSS 疑似クラス名を付...
加算、減算、乗算、除算の機能を実現するには、HTML に 2 つの数値を入力します。
1. parseFloat() 関数Web ページ上に簡単な計算機を作成し、テキスト ボックスに ...
Alibaba Cloud によって追加されたセキュリティ グループ ポートと、追加後にアクセスできない問題のトラブルシューティング
目的： 1. Alibaba Cloud Serverを介してサーバーの外部ネットワークをマッピング...
MySQL の一般的な問題とアプリケーション スキルの概要
序文MySQL の日常的な開発やメンテナンスでは、パスワードの紛失やテーブルの破損など、避けられない...
Alibaba Cloud Server Tomcatにアクセスできません
目次1. はじめに2. 解決策2.1 ファイアウォールを設定してポートを開く2.3 ポートを確認し、...
MYSQL ストアドプロシージャと関数の簡単な記述
ストアドプロシージャとは簡単に言えば、これは強力で、JAVA 言語のメソッドに似た比較的複雑な論理関...
Vueは書籍ショッピングカートの機能を実現
この記事の例では、書籍ショッピングカート機能を実現するためのVueの具体的なコードを参考までに共有し...