CSS でテキストを垂直方向に揃える

1. CSS で line-height プロパティを使用してテキストを垂直方向に揃える
2. CSS でテキストを垂直方向に揃えるには、div 内の span と line-height プロパティを使用する
3. CSS で flexbox を使用してテキストを垂直方向に揃える

CSS でテキストを垂直方向に揃える 3つの方法を紹介します。

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

単一行のテキストがある場合は、line-height プロパティを使用して、div 内でテキストを垂直方向に揃えることができます。line-height CSS プロパティは、ラインボックスの高さを設定します。テキストの行間の距離を設定するために使用されます。ただし、これを使用して 1 行のテキストを垂直方向に揃えることもできます。この手法は、テキストに改行がある場合や複数行の場合は機能しません。テキストを垂直方向に配置する場所の要件に応じて、line-height に任意の値を指定できます。

たとえば、div を作成し、その中に 1 行のテキストを書き込みます。div に center というクラス名を付けましょう。div 内に 1 行のテキスト Vertically aligned を書き込みます。div に 100px の height と 100px の line-height を指定して、テキストを div の中央に垂直に揃えます。最後に、div に 1px 黒一色の境界線を付けて、垂直方向の配置を確認します。

次の例は、CSS line-height プロパティを使用して、テキストが 100 px の height と 1px solid black の border を含む div の中心に垂直に配置されていることを示しています。

サンプルコード：

<div class="center"> Vertically aligned </div>

.center {
    height : 100px;
    line-height : 100px;
    border : 1px solid black;
}

CSS でテキストを垂直方向に揃えるには、div 内の span と line-height プロパティを使用する

line-height プロパティを使用して、複数の行を垂直方向に整列させることもできます。div タグ内に span タグを配置し、span タグ内に複数の行を配置できます。br タグを使用して行を区切り、複数行のテキストにすることができます。次に、div と span の両方に line-height プロパティを使用できます。また、span タグの display: inline-block CSS プロパティを使用して、複数行のコードをまとめます。したがって、複数行のテキストを相互に分離するには、span 内の line-height CSS プロパティも使用する必要があります。

たとえば、div を作成してから、div 内に span を作成します。br タグを使用して、その span 内に複数行のテキストを書き込みます。CSS で div を選択し、100px の height を指定し、line-height を 100px に設定します。1px solid black の div 境界線を設定して、配置を確認します。span タグの display プロパティを inline-block に設定して、複数行のテキストをまとめます。テキストの複数の行の間にギャップを与えるために、line-height を 20px に span を与えます。vertical-align を middle に保ち、テキストを垂直方向に正確に真ん中に配置します。

以下の例は、line-height および display: inline-block プロパティを使用した、div 内の複数行のテキストの垂直方向の配置を示しています。

サンプルコード：

<div> 
    <span>
        Multiple <br> line <br> code
    </span>
</div>

div{
    height : 100px;
    line-height: 100px;
    border : 1px solid black
}
span {
    display : inline-block;
    vertical-align : middle;
    line-height : 20px;
}

CSS で flexbox を使用してテキストを垂直方向に揃える

flexbox を使用して、div 内のテキストを垂直または水平に揃えることもできます。display プロパティを flex に設定することで、flexbox を使用できます。display プロパティを flex に設定した後、align-items プロパティを使用し、その値を center として配置して、テキストを div 内で垂直方向に整列させることができます。justify-content プロパティを使用して center に設定すると、テキストを div 内で水平方向に中央揃えにできます。フレックスボックスは非常に使いやすく、非常に効果的です。

たとえば、div を作成し、その中に 1 行または複数行のテキストを書き込みます。br タグを使用して、複数行のテキストを作成します。div に 100px の高さを与えます。境界線を 1px solid black に設定して、配置を確認します。flexbox を使用するには、display プロパティの値を flex として入力します。次に、align-items を center に設定して、テキストを div 内で垂直方向に中央に揃えます。justify-content の値を center に置くことで、テキストを水平方向に揃えることもできます。

したがって、flexbox を使用して、CSS でテキストを水平方向と垂直方向に揃えることができます。

サンプルコード：

<div>
    Align <br> Text to <br> Center
<div>

div {
    height : 100px;
    border : 1px solid black;
    display : flex;
    align-items : center;
    justify-content : center;
}