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はプライベートフィルターと基本的な使用法を定義します
推薦する
IDEA が Docker を統合してリモート展開を実現するための詳細な手順
1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...
カレンダー効果を実現するための Bootstrap+JQuery
この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...
MySQL設定ファイルを変更できない問題の解決方法（Win10）
他の人のために解決した問題を記録します。問題の説明MySQLのバージョンは5.7、オペレーティングシ...
デザイン理論: コンテンツプレゼンテーションのための 10 のヒント
<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...
PXEを使用してCentOS7.6を自動的にインストールする方法の詳細なチュートリアル
1. 需要ベースには 300 台の新しいサーバーがあり、CentOS7.6 オペレーティング システ...
Linux 上の MYSQL 5.7 でルート パスワードを取得する際の問題 (テスト済み、利用可能)
目次1. --skip-grant-tables 経由で取得する1.1 my.conf を変更し、新...
nodejs + koa + typescript の統合と自動再起動に関する問題
目次バージョンノートプロジェクトを作成する依存関係をインストールするコンテンツの記入src/serv...
jQueryは居住地を選択するためのドロップダウンボックスを実装します
居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...
JavaScriptはシンプルな計算機能を実装します
この記事では、参考までに、簡単な計算機能を実装するためのJavaScriptの具体的なコードを紹介し...
iframeをカプセル化するvueコンポーネントを開発する
目次1. コンポーネントの紹介2. コンポーネントの内部構造とロジック1. コード組織構造2. マッ...
デザインのヒント: きっと気に入っていただけると思います
<br />このタイトルを見ると、見覚えがあるかもしれません。多くのウェブサイトが同様の...
CSSは高度に適応したフルスクリーンを実現します
独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...
Linux システムで複数のバージョンの PHP を共存させるソリューション (超シンプル)
PHP7が出たので、最新バージョンのファンとしては、早速アップグレードして体験してみました。しかし...
ウェブサイトはいつ広告を掲載すべきでしょうか?
最近、インターネットのベテランと「広告」について議論したのですが、彼から非常に興味深い意見を聞きまし...
高度な JavaScript フロントエンド開発でよく使用されるいくつかの API の例の詳細な説明
目次ミューテーションオブザーバーAPI特徴インターセクションオブザーバーAPI例えば画像の遅延読み込...