ホームページ > 記事 > ウェブフロントエンド > CSS を使用してテキストを左、右、中央に揃える方法
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 ファイルを表示します。以下のような効果が表示されます。 コード例 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 ビデオ チュートリアル
以上がCSS を使用してテキストを左、右、中央に揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。