CSSテキストを垂直方向に中央揃えにする方法-フロントエンドQ&A-php.cn

CSSテキストを垂直方向に中央揃えにする方法

藏色散人

リリース： 2023-01-05 16:12:38

オリジナル

48037 人が閲覧しました

CSS でテキストを垂直方向に中央揃えにする方法: 1. line-height 属性を使用してテキストを垂直方向に中央揃えにする; 2. 外部ブロックを表のセルに書式設定する; 3. CSS3 flex レイアウトによってテキストを垂直方向に中央揃えにする。

CSSテキストを垂直方向に中央揃えにする方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

方法:

方法 1: line-height プロパティを使用してテキストを垂直方向に中央揃えにします

line-height プロパティは行間の距離を設定します(行の高さ); この属性には負の値は許可されません。

line-height プロパティは、行ボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。

行の高さとフォントサイズの間の計算された差 (CSS では「行間隔」と呼ばれます) は 2 つの半分に分割され、テキストコンテンツの行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはラインボックスです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                background: #ddd;
                line-height:300px;
            }
        </style>
    </head>
    <body>
        <div class="box">css 垂直居中了--文本文字</div>
    </body>
</html>

ログイン後にコピー

レンダリング:

CSSテキストを垂直方向に中央揃えにする方法

方法 2: 外側のブロックを表のセルに書式設定する

表のセルの内容を垂直中央、書式設定することができます。外側のブロックを表のセルとして使用し、テキストを垂直方向の中央に配置します。

例: 特定の高さを指定してブロック内に段落を配置する

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box{
                width: 400px;
                height: 200px;
                background: #ddd;
display: table-cell;
vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="box">css 垂直居中了--文本文字</div>
    </body>
</html>

ログイン後にコピー

レンダリング:

CSSテキストを垂直方向に中央揃えにする方法

方法 3: CSS3 を使用するレイアウトによりテキストが垂直方向の中央に配置されます

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box{
                width: 300px;
                height: 200px;
                background: #ddd;
                 /*设置为伸缩容器*/
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                /*垂直居中*/
                -webkit-box-align: center;/*旧版本*/
                -moz-box-align: center;/*旧版本*/
                -ms-flex-align: center;/*混合版本*/
                -webkit-align-items: center;/*新版本*/
                align-items: center;/*新版本*/
            }
        </style>
    </head>
    <body>
        <div class="box">css 垂直居中--文本文字（弹性布局）</div>
    </body>
</html>

ログイン後にコピー

レンダリング:

CSSテキストを垂直方向に中央揃えにする方法