CSSで水平方向の配置を設定する方法-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2023-01-03 09:24:49

オリジナル

10173 人が閲覧しました

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で水平方向の配置を設定する方法プログラミング関連の知識について詳しくは、