CSS で text-align プロパティを使用する方法

不言
リリース: 2018-12-06 09:08:22
オリジナル
4991 人が閲覧しました

CSS の CSS で text-align プロパティを使用する方法 属性は、テキストの位置を設定するために使用できます。CSS での CSS で text-align プロパティを使用する方法 属性の使用法を紹介します。具体的な内容。

CSS で text-align プロパティを使用する方法

#最初に簡単なコードを見てみましょう


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <p class="sample1">在此处显示文字</p>
  </body>
</html>
ログイン後にコピー

結果は次のとおりです

CSS で text-align プロパティを使用する方法

次に、上記のコードに基づいて CSS で text-align プロパティを使用する方法 属性を使用します。

テキストを左に配置したい場合は

(デフォルト値は左)、次のように書くことができます

p.sample1 {CSS で text-align プロパティを使用する方法:left; }
ログイン後にコピー
デフォルトは左なので、テキストの位置は変更されておらず、左側のままです


テキストを上に配置しますright

p.sample1 {CSS で text-align プロパティを使用する方法:right; }
ログイン後にコピー
In ブラウザでは、テキストは右側に表示されます

CSS で text-align プロパティを使用する方法 テキストは中央に表示されます

p.sample1 {CSS で text-align プロパティを使用する方法:center; }
ログイン後にコピー

ブラウザでは


CSS で text-align プロパティを使用する方法文字を均等に配置する


#英語の長文では、文字の配置を均等に配置するために justify が使用されます。

たとえば、次の文では、右側は非常に不均等に感じられます。

CSS で text-align プロパティを使用する方法この場合、CSS で text-align プロパティを使用する方法 属性の値を justify に設定し、text-justify 属性を使用して配置形式を指定できます。コードは次のとおりです。以下のように

p.sample1 {
   CSS で text-align プロパティを使用する方法:justify ;   
   text-justify:auto ; 
   }
ログイン後にコピー

text-justifyの値がautoに設定されている場合、単語と文字の間隔は均等に調整されます。

結果は次のとおりです: 右側がきれいになります

CSS で text-align プロパティを使用する方法最後に注意してください: 上記の設定はすべて文字列に対してのみ有効であり、画像やブロックに対しては有効ではありません。 、などは無効です。


以上がCSS で text-align プロパティを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート