HTMLでdivを中央に配置する方法-htmlチュートリアル-php.cn

HTMLでdivを中央に配置する方法

清浅

リリース： 2019-04-10 16:27:16

オリジナル

23278 人が閲覧しました

HTML で div を中央揃えにするメソッドには次のものが含まれます: margin メソッドは、マージンの左マージンと上マージンを親要素から子要素を引いた値に設定し、それを 2 で割って div を中央に配置します。 , 位置メソッドでは、div を中央に配置することもできます。センタリング

ページをレイアウトするとき、Web ページのメイン部分をページの中央に配置することがよくあります。これには、div を水平方向に中央に配置する必要があります。次に、 div をページの中央に配置する方法を記事で詳しく紹介します。一定の参考価値があるので、皆様のお役に立てれば幸いです。

HTMLでdivを中央に配置する方法

[推奨コース: HTML チュートリアル #]

margin メソッド

margin を使用して div を中央に配置できます。 margin-left は、親要素の幅から子要素の幅を引いて 2 で割った値です (この例では: (400-100)/2=150px)。margin-top の値は、要素の高さです。親要素から子要素の高さを引いた値を 2 で割った値 (この例では: (300-100)/2= 100px)

例:

<style>
.box{
width:400px;
height: 300px;
border: 1px solid #ccc;
}
.box1{
width:100px;
height: 100px;
background-color: pink;
margin-left: 150px;
margin-top:100px;
}
</style>
</head>
<body>
<div>
  <div></div>
</div>
</body>
</html>

ログイン後にコピー

レンダリング:

HTMLでdivを中央に配置する方法

position メソッド

位置決めを使用して div を垂直方向の中央に配置できます。サブ要素の絶対位置を設定し、 top と left の値を 50% に設定します。ただし、位置決めを使用する場合は、margin-left と margin-right の値がすべて負の値であるマージン値も設定する必要があることに注意してください。値のサイズは、子要素の幅と高さの半分です

#例:

<style>
	.box{
	     width:400px;
	     height: 300px;
	     border: 1px solid #ccc;
	     position: relative;
	}
	.box1{
		width:100px;
		height: 100px;
		background-color: pink;
		position: absolute;
        top: 50%;
        left: 50%;
        margin:-50px 0 0 -50px 		
		}
	</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

ログイン後にコピー

#レンダリング:

# この記事の参照: HTMLでdivを中央に配置する方法