ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで水平方向の配置を設定する方法

CSSで水平方向の配置を設定する方法

青灯夜游オリジナル: 2021-02-23 17:13:0910171ブラウズ

CSS で水平方向の配置を設定する方法: 1. "text-align: center;" スタイルを使用してテキスト要素の水平方向の中央揃えを設定します; 2. "margin: auto;" スタイルを使用して設定しますブロック要素の水平方向の中央揃え。

CSSで水平方向の配置を設定する方法

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

1. text-align: center;

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

属性値:

left テキストを左に配置します。デフォルト: ブラウザによって決定されます。
#右テキストを右に配置します。
#center テキストを中央に配置します。
#justify テキストを両端に揃える効果を実現します。

#例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.center {
				text-align: center;
				border: 3px solid green;
			}
		</style>
	</head>

	<body>

		<h2>文本居中对齐</h2>

		<div class="center">
			<p>文本居中对齐。</p>
		</div>

	</body>

</html>

レンダリング:

CSSで水平方向の配置を設定する方法 #[推奨チュートリアル:

CSS ビデオチュートリアル

]

margin: auto;margin 省略属性を使用して、すべての外側マージンを 1 つのステートメント距離に設定します属性。

属性値:

など)、margin: auto; を使用できます。

要素の幅を設定すると、要素がコンテナの端にオーバーフローするのを防ぎます。

この要素は幅を指定し、両側の空のマージンを均等に配分します

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			.center {
				margin: auto;
				width: 60%;
				border: 3px solid #73AD21;
				padding: 10px;
			}
		</style>
	</head>

	<body>

		<h2>元素居中对齐</h2>

		<div class="center">
			<p>div 元素是居中的</p>
		</div>

	</body>

</html>

レンダリング:

CSSで水平方向の配置を設定する方法プログラミング関連の知識について詳しくは、

プログラミングビデオ

をご覧ください。！

以上がCSSで水平方向の配置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：CSSの最大の利点は何ですか次の記事：CSSの最大の利点は何ですか

続きを見る