Flexレイアウトを使用してdiv内のサブ要素を垂直方向に中央揃えする例

1. Flex は Flexible Box の略で、「柔軟なレイアウト」を意味し、ボックスモデルに最大限の柔軟性を提供するために使用されます。任意のコンテナーを Flex レイアウトとして指定できます。 Flex レイアウトを設定すると、子要素の float、clear、vertical-align プロパティが無効になることに注意してください。

Flex レイアウトを使用する要素は、Flex コンテナー、または略して「コンテナー」と呼ばれます。すべての子要素は自動的にコンテナメンバーになり、Flex アイテム、または略して「アイテム」と呼ばれます。デフォルトでは、コンテナーには水平の主軸と垂直の交差軸の 2 つの軸があります。主軸の開始位置（境界との交点）を主開始、終了位置を主終了、交差軸の開始位置を交差開始、終了位置を交差終了と呼びます。デフォルトでは、アイテムは主軸に沿って配置されます。 1 つのアイテムが占める主軸のスペースをメインサイズと呼び、交差軸のスペースをクロスサイズと呼びます。

flex-direction flex-wrap flex-flo justify-content align-items align-content

2. ブロック内の要素の垂直方向の中央揃え

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>要素の垂直方向の中央揃えについて</title>
    <スタイル>
        html、本文{
            境界線: 0;
            マージン: 0;
            パディング: 0;
            高さ: 100%;
            幅: 100%;
        }
 
        .div-メイン{
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央;
            高さ: 30%;
            幅: 50%;
            背景: #00a2d4;
        }
 
        .sub-span {
            マージン: 自動;
            フォントサイズ: xx-large;
        }
 
    </スタイル>
</head>
 
<本文>
 
<div class="div-main">
 
    <span class="sub-span">
    洛河の女神
</div>
</本文>
</html>

Flexレイアウトを使用してdiv内のサブ要素を垂直に中央揃えする例についての記事はこれで終わりです。Flexを使用してdiv内のサブ要素を垂直に中央揃えする方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: HTML でテキストボックスのプロンプト機能を実装するさまざまな方法

>>: MySQLのインデックスシステムがB+ツリーを使用する理由の分析