ホームページ > 記事 > ウェブフロントエンド > CSS を使用してテキストを左、右、中央に揃える方法
CSS を使用してテキストを左、右、中央に揃える方法
- 不言オリジナル
- 2018-11-15 10:26:4524457ブラウズ
Web ページのレイアウトではテキストの位置が重要です。今日の記事では、CSS を使用してテキストを左揃え、右揃え、中央揃えにする方法を説明します。具体的な内容を見てみましょう。
テキストの配置 (左揃え、右揃え、中央揃え) を設定するには、使用する必要がある CSS プロパティは text-align プロパティです。 (関連する推奨事項: CSS 学習マニュアル )
文法形式:
text-align :(文本位置）
| Position | Description |
| 左揃え | |
| 右揃え | |
| 中央に揃える | |
| 両端を揃える |
text-align：left;テキストの右揃えの設定方法:
text-align：right;テキストの中央揃えの設定方法：
text-align：center;テキストの揃えの設定方法:
text-align：justify;具体的なコード例を見てみましょう1:
<!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 ファイルを表示します。以下のような効果が表示されます。
テキストの左揃え:
<!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 ビデオ チュートリアル以上がCSS を使用してテキストを左、右、中央に揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。