CSSのtext-align属性の使い方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのtext-align属性の使い方

May 28, 2019 am 09:30 AM

css

css text-align プロパティは、要素内のテキストの水平方向の配置を設定するために使用されます。このプロパティは、ラインボックスが整列する位置を指定することによって、ブロックレベル要素内のテキストの水平方向の整列を設定します。値 justify は、ユーザーエージェントが行コンテンツ内の文字と単語の間の間隔を調整できるようにすることでサポートされており、ユーザーエージェントによって異なる結果が得られる場合があります。

CSSのtext-align属性の使い方

#css text-align 属性を使用するにはどうすればよいですか?

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

構文:

1	`text-align : left \| right \| center \| justify \| inherit;`

ログイン後にコピー

属性値:

● Left: テキストを左に配置します。デフォルト: ブラウザによって決定されます。

# 右: テキストを右に配置します。

##●center: テキストを中央に配置します。

##●両端揃え: テキストを両端に揃える効果を実現します。

## ● Inherit: text-align 属性の値を親要素から継承することを指定します。

説明:

この属性は、行ボックスが整列する点を指定することによって、ブロックレベル要素内のテキストの水平方向の整列を設定します。値 justify は、ユーザーエージェントが行コンテンツ内の文字と単語の間の間隔を調整できるようにすることでサポートされており、ユーザーエージェントによって異なる結果が得られる場合があります。

注: すべてのブラウザは text-align 属性をサポートしています。属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。

css text-align 属性の例

&lt;!DOCTYPE html&gt;
&lt;html&gt;
 
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            .box{
                width: 400px;
                height: 200px;
                border: 1px solid red;
            }
            h1 {
                text-align: center
            }
             
            h2 {
                text-align: left
            }
             
            h3 {
                text-align: right
            }
        &lt;/style&gt;
    &lt;/head&gt;
 
    &lt;body&gt;
        &lt;div class=&quot;box&quot;&gt;
            &lt;h1&gt;这是标题 1&lt;/h1&gt;
            &lt;h2&gt;这是标题 2&lt;/h2&gt;
            &lt;h3&gt;这是标题 3&lt;/h3&gt;
        &lt;/div&gt;
         
    &lt;/body&gt;
 
&lt;/html&gt;