序文 馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います。そこで、水平方向と垂直方向の中央揃えによく使用されるいくつかの方法をまとめておきます。 最初の方法 <!--html ボックス コード--> <!--水平と垂直の中央--> <div class="Centered1"> <p>d最初のタイプ</p> </div> <!-css スタイル部分--> .中央揃え1{ 背景色: #800070; 幅: 100%; 高さ:500px; 位置: 相対的; } .Centered1 p{ 幅: 200ピクセル; 高さ: 200px; 背景色: ディープピンク; 行の高さ: 200px; テキスト配置: 中央; 位置: 絶対; 左: 0; 下部: 0; 右:0; 上: 0; マージン: 自動; } 2番目の方法 <!--html ボックス コード--> <!--水平と垂直の中央--> <div class="Centered2"> <p>d2番目のタイプ</p> </div> <!-css スタイル部分--> /*2番目の方法は水平と垂直の中央揃えです*/ .Centered2{ 背景色: #ef8518; 幅: 100%; 高さ: 500px; 位置: 相対的; } .Centered2 p { 位置: 絶対; 幅: 200ピクセル; 高さ: 200px; 背景色:赤; 行の高さ: 200px; テキスト配置: 中央; 左: 50%; 上位:50%; 左マージン:-100px; 上マージン: -100px; } 3番目の方法 <!--html ボックス コード--> <!--水平と垂直の中央--> <div class="Centered3"> <p>d3番目のタイプ</p> </div> <!-css スタイル部分--> /*3番目の方法は水平と垂直の中央揃えです*/ .Centered3{ 背景色: 薄灰色; 幅: 100%; 高さ: 500px; 位置: 相対的; } .Centered3 p { 位置: 絶対; 幅: 200ピクセル; 高さ: 200px; 背景色:ダークオレンジ; 行の高さ: 200px; テキスト配置: 中央; 左: 50%; 上位: 50%; 変換:translate(-50%,-50%); } 4番目の方法 <!--html ボックス コード--> <!--水平と垂直の中央--> <div class="Centered4"> <p>d第4のタイプ</p> </div> <!-css スタイル部分--> /*4番目の方法は、水平および垂直の中央揃え、古いバージョンのフレックスレイアウトです*/ .中央揃え4{ 背景色: #FF4444; 幅: 100%; 高さ: 500px; ディスプレイ: -webkit-box; -webkit-box-pack:center; -webkit-box-align: 中央; } .Centered4 p { 幅: 200ピクセル; 高さ: 200px; 背景色:cadetblue; 行の高さ: 200px; テキスト配置: 中央; } 5番目の方法 <!--html ボックス コード--> <!--水平と垂直の中央--> <div class="Centered5"> <p>d 第 5 タイプ</p> </div> <!-css スタイル部分--> /*5番目の方法は、水平と垂直の中央揃えです。flexの新しいバージョンでは、水平と垂直の中央揃えになります*/ .中央揃え5{ 背景色: ダークスレートブルー; 幅: 100%; 高さ: 500px; ディスプレイ: フレックス; コンテンツを中央揃えにする。 アイテムの位置を中央揃えにします。 } .Centered5 p { 幅: 200ピクセル; 高さ: 200px; 背景色:フクシア; 行の高さ: 200px; テキスト配置: 中央; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Mysql のデッドロックの表示とデッドロックの除去の詳細な説明
>>: dockerエラーの原因分析 終了しました (1) 4分前
WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....
目次オンデマンドインポート:グローバルインポートオンデマンドインポート:プラグインをインストールする...
ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるた...
1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...
MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...
[LeetCode] 196.重複したメールを削除するSQL クエリを記述して、Person とい...
IE の条件付きコメントは、通常の (X)HTML コメントに対する Microsoft 独自の (...
複雑なコンポーネント (クラス コンポーネント) と単純なコンポーネント (関数コンポーネント) を...
フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...
まず、href 属性と onclick イベントの実行順序について説明します。マウスが a タグをク...
1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...
基本的な HTML Web ページ タグのネスト ルールを紹介する場合、最初に説明する必要があるのは...
1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...
目次1. ルーティング関連オブジェクト2. ルーティングオブジェクトの場所3. ルーティング構成4....
v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...