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

CSSで水平方向のセンタリングを設定する方法

青灯夜游

リリース： 2023-01-04 09:34:22

オリジナル

5830 人が閲覧しました

CSS で水平方向の中央揃えを設定する方法: 1. "text-align: center;" スタイルを使用して、ブロックレベル要素 (親要素) のインライン要素を水平方向に中央揃えにします。 2. "margin: 0 auto" を使用します。 ;" スタイル。ブロックレベル要素 (親要素) 内で固定幅のブロックレベル要素を水平方向に中央揃えにできます。

CSSで水平方向のセンタリングを設定する方法

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

方法 1: text-align 属性を使用する

text-align: center; スタイルを親要素に直接設定すると、次のことができます。ブロックレベルの要素を設定します (親要素) のインライン要素の水平方向の中央揃え

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#father {
				width: 300px;
				height: 100px;
				background: palevioletred;
				text-align: center;
			}
		</style>

		<div id="father">
			我是测试文本！
		</div>

</html>

ログイン後にコピー

Rendering:

CSSで水平方向のセンタリングを設定する方法

Description:

このメソッドは、テキスト、画像、ボタン、その他のインライン要素の水平方向の中央揃えにのみ有効です (display 属性は inline または inline-block# に設定されています) ##)

(学習ビデオ共有:

css ビデオチュートリアル )

方法 2: margin 属性を使用します

中央に配置する必要がある子要素を設定します

margin: 0 auto; スタイルでは、ブロックレベルの要素 (親要素) 内で固定幅のブロックレベルの要素を水平方向に中央に配置できます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			#father {
				width: 300px;
				height: 100px;
				background-color: palevioletred;
			}
			
			#son {
				width: 100px;
				height: 50px;
				background-color: pink;
				margin: 0 auto;
			}
		</style>

		<div id="father">
			<div id="son">我是块级元素</div>
		</div>

</html>

ログイン後にコピー

レンダリング:

CSSで水平方向のセンタリングを設定する方法