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はシンプルなショッピングカートの例を実装します
この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...
DIV+CSS命名規則の詳細な説明はSEO最適化に役立ちます
1. CSSファイルの命名規則提案: 文字、_、-、数字を使用します。文字で始まる必要があり、純粋な...
CentOS7 での mysql 5.7.23 のバイナリ インストール
インターネット上のインストール情報は不均一で、落とし穴だらけです。インストールにはかなりの労力がかか...
アコーディオン効果を実現するネイティブ js
実際のWebページ開発でも、アコーディオンは頻繁に登場します。簡単なアコーディオンを作ったのですが、...
Docker+jenkins+python3環境を使用して非常に詳細なチュートリアルを構築する
序文：自動化を記述した後、毎日サーバー上で実行する必要があります。このような問題に遭遇しました。Je...
MySQL 5.7.23 のインストールと設定方法のグラフィックチュートリアル
この記事では、参考として MySQL 5.7.23 のインストール チュートリアルを記録します。 1...
UA による Web サイトのクロールを防ぐ Nginx のクローラー対策戦略
クローラー対策ポリシー ファイルを追加しました: vim /usr/www/server/nginx...
データベースクエリの最適化: サブクエリの最適化
1. 事例会社のトップ以外の従業員全員を年齢別にグループ化します。 t_emp で id が存在しな...
CSS で要素を中央揃えにする N 通りの方法
目次序文インライン要素の中央揃えテキストを垂直に中央揃え要素を水平方向に中央揃えにするブロックレベル...
ネイティブ JS カプセル化 vue タブ切り替え効果
この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有していま...
ページの下部にHTMLフッターを配置する簡単な方法
要件:ページ コンテンツが短く、ブラウザーの高さをサポートできない場合でも、フッターをウィンドウの下...
JavaScript のプライベート クラス フィールドと TypeScript のプライベート修飾子の詳細な説明
目次JavaScript のプライベート クラス フィールドとプライバシーの必要性JavaScrip...
JavaScript の基礎におけるデータ型の詳細な説明
目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...
SQL文の最適化の一般的な手順の詳細な説明
序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...
MySql 範囲内の検索時にインデックスが有効にならない理由の分析
1 問題の説明この記事では、確立された複合インデックスをソートし、レコード内の非インデックス フィー...