HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

序文

馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います。そこで、水平方向と垂直方向の中央揃えによく使用されるいくつかの方法をまとめておきます。

最初の方法

<!--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アプレットはシンプルな計算機を実装する

WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....

element-plus でオンデマンドインポートとグローバルインポートを実装する方法

目次オンデマンドインポート:グローバルインポートオンデマンドインポート:プラグインをインストールする...

HTML コード例: ハイパーリンクの詳細な説明

ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるた...

ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...

MySQL パスワード変更方法の概要

MySQL 5.7 より前のバージョンのパスワードを変更する方法:方法1: SET PASSWORD...

LeetCode の SQL 実装 (196. 重複するメールボックスを削除する)

[LeetCode] 196.重複したメールを削除するSQL クエリを記述して、Person とい...

IE における条件付きコメントの利点と欠点

IE の条件付きコメントは、通常の (X)HTML コメントに対する Microsoft 独自の (...

Reactの状態の理解についての簡単な分析

複雑なコンポーネント (クラス コンポーネント) と単純なコンポーネント (関数コンポーネント) を...

フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...

aタグのhref属性とonclickイベントの比較

まず、href 属性と onclick イベントの実行順序について説明します。マウスが a タグをク...

Ubuntu で FTP サーバーを構築する方法の詳細な説明 (成功保証)

1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...

HTML のブロックレベル要素と行レベル要素、特殊文字、ネスト規則

基本的な HTML Web ページ タグのネスト ルールを紹介する場合、最初に説明する必要があるのは...

MySql 5.7.17 無料インストール構成チュートリアルの詳細な説明

1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...

Angularルーティングの基礎の詳細な説明

目次1. ルーティング関連オブジェクト2. ルーティングオブジェクトの場所3. ルーティング構成4....

Vue v-model 関連の知識のまとめ

​v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...