CSS を使用してテキストを左、右、中央に揃える方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

不言

Nov 15, 2018 am 10:26 AM

位置合わせ

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 までご連絡ください。