ホームページ > 記事 > ウェブフロントエンド > HTMLでテキストの中央揃えを設定する方法

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

王林オリジナル: 2021-06-23 13:50:5569876ブラウズ

htmlテキストの中央揃えを設定する方法は、段落テキストに text-align 属性を追加し、その属性値を [h1 {text-align:center}] のように中央に設定することです。 text-align 属性は、要素のテキストの水平方向の配置を指定します。

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

テキストを中央揃えに設定するには、text-align 属性を使用するだけです。プログラミングに慣れていない友達の中には、text-algin 属性についてあまり詳しくなく、その使用法を理解していない人もいると思いますので、この属性について簡単に紹介しましょう。

text-align 属性は、要素のテキストの水平方向の配置を指定します。

一般的に使用される属性値は次のとおりです。

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

コードのデモ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>

実行結果を以下に示します:

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

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

関連記事