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

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

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

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

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

このチュートリアルの動作環境: 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 までご連絡ください。