ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでテキストの中央揃えを設定する方法

CSSでテキストの中央揃えを設定する方法

王林オリジナル: 2021-03-05 16:04:2212778ブラウズ

CSS でテキストの中央揃えを設定する方法: [p{text-align:center;}] などの text-align 属性を使用してこれを実現できます。 [text-align:left;] や [text-align:right;] のように、テキストを左または右に設定することもできます。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

cssにはテキスト属性text-alignがあり、要素のテキストの水平方向の配置（中央揃え、左揃え、右揃え、両端揃えなど）を指定できます。

属性値:

left テキストを左に配置します。デフォルト: ブラウザによって決定されます。
#右テキストを右に配置します。
#center テキストを中央に配置します。
#justify テキストを両端に揃える効果を実現します。
#inherit text-align 属性の値を親要素から継承することを指定します。

たとえば、テキストを中央揃えにしたい場合はどうすればよいでしょうか?

具体的な実装コード:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
p{
    width:500px;
    border:2px solid red;
    text-align:center;
}
</style>
</head>

<body>
<h2>文本居中对齐</h2>
<p>居中的文本</p>
</body>
</html>

(学習ビデオ共有:

css ビデオチュートリアル)

実行結果:

CSSでテキストの中央揃えを設定する方法

CSSでテキストの中央揃えを設定する方法

関連記事