CSS でテキストを垂直にセンタリングする

1. CSS で line-height プロパティを使用してテキストを垂直方向に中央揃えにする
2. CSS で display、vertical-align および line-height プロパティを使用してテキストを垂直方向に中央揃えにする
3. CSS でテーブル表示をシミュレートしてテキストを垂直方向に中央揃えにする

この記事では、CSS でテキストを垂直方向に中央揃えする方法を紹介します。

CSS で line-height プロパティを使用してテキストを垂直方向に中央揃えにする

line-height プロパティの高さを div として設定して、CSS でテキストを垂直方向の中央に配置できます。line-height プロパティは、線の高さを指定します。div 要素の境界線を作成することで説明できます。text-align プロパティを使用して center に設定し、テキストを水平方向の中央に揃えることもできます。

たとえば、HTML で div を作成し、テキスト Hello World!を記述します。間に。次に、CSS で、div の高さを 200px に設定します。また、line-height を同じ値に設定します。テキストを text-align プロパティで center に揃えます。border ショートハンドプロパティを使用して、3px 幅の solid ボーダーを black カラーで作成します。

以下の例では、div の line-height と height の同じピクセルを設定しています。したがって、テキストを垂直方向に中央揃えにします。ただし、この方法は 1 行のテキストに対してのみ機能します。

サンプルコード：

<div>
    Hello World!
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

CSS で display、vertical-align および line-height プロパティを使用してテキストを垂直方向に中央揃えにする

display、vertical-align、line-height などのさまざまな CSS プロパティを使用して、テキストを複数行の中央に配置できます。display プロパティは、要素の表示動作を設定します。vertical-align プロパティは、要素の垂直方向の配置を担当します。display を inline-block に設定し、vertical-align を middle に設定して、複数行のテキストの垂直方向の配置を実現できます。

たとえば、HTML で div を作成し、その中に span を記述します。Hello というテキストを書き、<br> で改行し、span の中に World!と書きます。次に、CSS で、line-height と height を 200px の同じ値に指定し、div を選択します。div に境界線を付け、最初の方法で行ったようにテキストを中央揃えにします。次に、span を選択し、display プロパティを inline-block に設定します。次に、middle の値を vertical-align プロパティに指定します。最後に、line-height の値を normal に設定します。

以下の例では、span の line-height プロパティを normal に変更して、テキストの複数の行が通常の line-height を持つようにしました。inline-block 値は、上の行のすぐ下にあるテキストの次の行を開始します。vertical-align プロパティの middle 値は、テキストを垂直軸の中央に配置します。

サンプルコード：

<div>
    <span>Hello <br> World! </span>
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

CSS でテーブル表示をシミュレートしてテキストを垂直方向に中央揃えにする

テキストをテーブルセルとしてシミュレートして、CSS の垂直方向の中央に配置できます。display プロパティを使用してテーブルをシミュレートします。また、vertical-align プロパティを使用して、テキストを垂直方向の中央に配置します。2 番目のメソッドの HTML スニペットを処理し、それに新しい CSS を適用します。

まず、div を選択し、高さ、幅、境界線を設定します。display プロパティを使用して、値を table に設定します。div がテーブルのように機能します。次に、span を選択し、display プロパティを table-cell に設定し、vertical-align プロパティを middle に設定します。span 要素を table-cell として設定すると、要素はテーブルセルのようになります。このようにして、垂直方向に中央揃えのテキストを作成できます。

コード例：

<div>
    <span>Hello <br> World!</span>
</div>

div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}