CSSでテキストを中央揃えにする方法-CSSチュートリアル-php.cn

CSSでテキストを中央揃えにする方法

醉折花枝作酒筹

リリース： 2023-01-05 16:09:02

オリジナル

55809 人が閲覧しました

方法: 1. text-align 属性を使用して、テキストが水平方向の中央に配置されるように設定します (構文 "text-align:center")。2. line-height 属性を使用して、テキストが垂直方向に配置されるように設定します。中央揃え、構文 "line-height: value"; 3. CSS3 のフレックスレイアウトを使用して、テキストを垂直方向に中央揃えにします。

CSSでテキストを中央揃えにする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

1. text-align 属性を使用して、テキストを水平方向の中央に配置します。

text-align 属性は、要素内のテキストの水平方向の配置を指定します。中心値を使用してテキストを配置します。

text-align は、要素内のテキスト行をどのように配置するかに影響を与える基本的な属性です。 left、right、center の値を指定すると、要素内のテキストがそれぞれ左揃え、右揃え、中央揃えになります。テキストを中央揃えにしたい場合は、center を使用してください。

この属性は、text タグや img タグなどの一部のインラインオブジェクト (または同様の要素) の中央揃えを設定します。

この属性には次の特性があります:

1) text-align の中心はコンテナに適用されます。コンテナ内のテキストのみが対象となり、コンテナ内の表示はインラインまたは-ブロックコンテナ、内部コンテナの表示がブロックの場合、内部コンテナのコンテンツは中央に配置されません。

2)、text-align は下向きに推移的であり、引き続き子要素に渡されます。 div を設定すると、その子 div 内のコンテンツも中央に配置されます。

nbsp;html>
 
     
        <meta>
        <title>css 水平居中</title>
        <style>
            .box {
                width: 400px;
                height: 100px;
                background: pink;
                text-align:center;
            }
        </style>
     
     
        <div>css 水平居中了--文本文字</div>
    

ログイン後にコピー

レンダリング:

CSSでテキストを中央揃えにする方法

#2. line-height 属性を使用してテキストを垂直方向に中央揃えにします

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

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

nbsp;html>
 
     
        <meta>
        <title>css 垂直居中</title>
        <style>
            .box {
                width: 300px;
                height: 300px;
                background: paleturquoise;
                line-height:300px;
            }
        </style>
     
     
        <div>css 垂直居中了--文本文字</div>
    

ログイン後にコピー

レンダリング:

CSSでテキストを中央揃えにする方法

3. CSS3 フレックスレイアウトにより、テキストが垂直方向の中央に配置されます

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box{
                width: 300px;
                height: 200px;
                background: #ccc;
                 /*设置为伸缩容器*/
                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>