CSSでテキストを中央揃えにする方法は? CSSテキストの垂直方向の中央揃えを設定する方法

Web デザインのプロセスでは、美しいレイアウトを実現するためにテキストを中央に配置する必要がある場合があります。では、テキストを中央に配置するにはどうすればよいでしょうか。この記事では、cssで文字の縦方向の中央揃えを設定する方法を紹介します。

まず、CSS を使用して要素の水平方向の中央揃えを実現するのは比較的簡単であることを知っておく必要があります。テキストの場合、親要素を中心に text-align: center を設定するだけで済みます。 div などのブロックレベルの要素の場合、要素の垂直方向の中央揃えを実現するには、左と右のマージン値を自動に設定するだけです。CSS のvertical-align 属性を考える人もいますが、必要なのはそれだけです。 valign 属性を持つ要素に対する効果。次に、css が単一テキストの垂直方向の中央揃えと複数テキストの垂直方向の中央揃えを実装する方法を見てみましょう。

最初に CSS 単一行テキストの垂直方向の中央揃えを見てみましょう

単一行テキストの場合、テキスト行の高さ (line-height) を変更するだけで済みます。と面積が一致するように高さを設定するだけです。

CSS 単一行テキストの垂直方向中央揃えの実装コード:

HTML:

<div id="div1">
        php中文网单行文本垂直居中
    </div>

CSS:

 #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/
        }

CSS テキストの 1 行の垂直方向の中央揃え効果は次のとおりです:

次に、行テキストの垂直方向の中央揃えについて見てみましょう

説明: 複数行のテキストの垂直方向の中央揃えには 2 つの状況があります。1 つは、親要素の高さが固定されていない場合です。もう 1 つは、親要素の高さが固定されていることです。

1. 親要素の高さは固定されていません

親要素の高さが固定されていない場合、高さは内部テキストによってのみ拡張できます。 。したがって、padding の値を設定することでテキストを垂直方向の中央に表示することができます。padding-top と padding-bottom の値を同じに設定するだけです。

css 複数行のテキストを垂直方向に中央揃えにする コード:

HTML:

  <div id="div1">
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中。
    </div>

CSS:

  #div1{
            width: 300px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center; /*设置文本水平居中*/
            padding: 50px 20px;
        }

css の複数行テキストの垂直方向の中央揃え効果は次のとおりです:

2. 親要素の高さは固定です。

css のvertical-align 属性は、valign 属性を持つ要素に対してのみ有効です。 . display: table; と組み合わせると、div で table 属性をシミュレートできます。したがって、親 div:display:table;; の表示属性を設定し、テキスト コンテンツを含む div を追加し、その display:table-cell; およびvertical-align: middle を設定します。

css 複数行テキストの垂直方向中央揃えコード:

HTML:

<div id="outer">
        <div id="middle">
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中。
        </div>
    </div>

CSS:

#outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
        #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*设置文本水平居中*/  
            width:100%;   
        }

CSS 複数行テキストの垂直方向の中央揃え効果は次のとおりです:

この記事はここで終わります。実際には、ここでは紹介しません。 1 つずつ紹介します。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトに注目してください。

以上がCSSでテキストを中央揃えにする方法は? CSSテキストの垂直方向の中央揃えを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。