ホームページ  >  記事  >  ウェブフロントエンド  >  CSS を使用してテキストを左、右、中央に揃える方法

CSS を使用してテキストを左、右、中央に揃える方法

不言
不言オリジナル
2018-11-15 10:26:4524452ブラウズ

Web ページのレイアウトではテキストの位置が重要です。今日の記事では、CSS を使用してテキストを左揃え、右揃え、中央揃えにする方法を説明します。具体的な内容を見てみましょう。

テキストの配置 (左揃え、右揃え、中央揃え) を設定するには、使用する必要がある CSS プロパティは text-align プロパティです。 (関連する推奨事項: CSS 学習マニュアル )

文法形式:

text-align :(文本位置)
#left左揃えright右揃えcenter中央に揃えるjustify両端を揃える
Position Description
続行これら 4 つの配置方法の設定方法をそれぞれ見てみましょう。

テキストの左揃えの設定方法:

text-align:left;

テキストの右揃えの設定方法:

text-align:right;

テキストの中央揃えの設定方法:

text-align:center;

テキストの揃えの設定方法:


text-align:justify;

具体的なコード例を見てみましょう1:


TextAlign.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextAlign.css" />
    <title></title>
    </head>
    <body>
  <div class="TextLeft">
    php中文网左对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextRight">
    php中文网右对齐<br />
   php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextCenter">
    php中文网居中对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextJustify">
    php中文网<br />
    两端对齐<br />
    php中文网<br />
    php
    </div>
    </body>
    </html>

TextAlign.css

.TextLeft{
    margin-top:24px;    
    margin-left:32px;    
    border:1px solid #ff6a00;    
    width:480px;    
    text-align:left;
}
.TextRight {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: right;
}
.TextCenter {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: center;
}
.TextJustify {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: justify;    
    text-justify: distribute-all-lines;
}

結果の表示

Web ブラウザを使用して、上記の HTML ファイルを表示します。以下のような効果が表示されます。

CSS を使用してテキストを左、右、中央に揃える方法

コード例 2:

テキストの左揃え:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.leftText{
  text-align:left; 
  }
	</style>
</head>
<body>
<div class="leftText">左对齐</div>
</body>
</html>

テキストの右揃え:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.rightText{
  text-align:right; 
  }
	</style>
</head>
<body>
<div class="rightText">右对齐</div>
</body>
</html>

中央揃え:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.centerText{
  text-align:center; 
  }
	</style>
</head>
<body>
<div class="centerText">居中对齐</div>
</body>
</html>

テキストの配置の詳細については、# に注目してください。 ##CSS ビデオ チュートリアル

php 中国語 Web サイトのコラム! ! !

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。