ホームページ > 記事 > ウェブフロントエンド > HTMLテキストの中央揃えのスタイルは何ですか?

HTMLテキストの中央揃えのスタイルは何ですか?

青灯夜游オリジナル: 2021-02-22 14:48:1718615ブラウズ

html テキストの中央揃えスタイル: 1. 水平方向の中央揃えスタイルは「text-align: center;」です; 2. テキストの垂直方向の中央揃えスタイルは「line-height:px value;」です; 3. テキストの垂直方向の中央揃えスタイルは「表示: flex;align-items: center;」。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

#html text center

1. テキストを水平方向に中央揃え --text-align: center;#text-align 属性は、要素内のテキストの水平方向の配置を指定します。

この属性は、行ボックスが整列する位置を指定することによって、ブロックレベル要素内のテキストの水平方向の整列を設定します。値 justify は、ユーザーエージェントが行コンテンツ内の文字と単語の間の間隔を調整できるようにすることでサポートされており、ユーザーエージェントによって異なる結果が得られる場合があります。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			h1 {
				text-align: center
			}
			
			h2 {
				text-align: left
			}
			
			h3 {
				text-align: right
			}
		</style>
	</head>

	<body>
		<h1>这是标题 1</h1>
		<h2>这是标题 2</h2>
		<h3>这是标题 3</h3>
	</body>

</html>


	#right
	center
	justify
	inherit

レンダリング:

[推奨チュートリアル:

CSS ビデオチュートリアル HTMLテキストの中央揃えのスタイルは何ですか? , "

html ビデオチュートリアル

"]2, テキストを垂直方向に中央揃え

1), 行-height は 1 行のテキストを垂直方向に中央揃えにします

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: palegoldenrod;
			    line-height:300px;
			}
		</style>
	</head>
	<body>
		<div class="box">css 垂直居中了--文本文字</div>
	</body>
</html>

効果画像:

2)、CSS3 flex レイアウトによりテキストが垂直方向に中央揃えになります HTMLテキストの中央揃えのスタイルは何ですか?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: paleturquoise;
			    line-height:300px;
			     /*设置为伸缩容器*/
			    display: -webkit-box;
			    display: -moz-box;
			    display: -ms-flexbox;
			    display: -webkit-flex;
			    display: flex;
			    /*垂直居中*/
			    -webkit-box-align: center;/*旧版本*/
			    -moz-box-align: center;/*旧版本*/
			    -ms-flex-align: center;/*混合版本*/
			    -webkit-align-items: center;/*新版本*/
			    align-items: center;/*新版本*/
			}
		</style>
	</head>
	<body>
		<div class="box">css 垂直居中--文本文字（弹性布局）</div>
	</body>
</html>

プログラミング関連の知識については、 HTMLテキストの中央揃えのスタイルは何ですか? プログラミングビデオ

をご覧ください。！

以上がHTMLテキストの中央揃えのスタイルは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLのpに点線枠を設定する方法次の記事：HTMLのpに点線枠を設定する方法

続きを見る