ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでdivを中央に配置する方法
HTMLでdivを中央に配置する方法
- 清浅オリジナル
- 2019-04-10 16:27:1623286ブラウズ
HTML で div を中央揃えにするメソッドには次のものが含まれます: margin メソッドは、マージンの左マージンと上マージンを親要素から子要素を引いた値に設定し、それを 2 で割って div を中央に配置します。 , 位置メソッドでは、div を中央に配置することもできます。 センタリング
ページをレイアウトするとき、Web ページのメイン部分をページの中央に配置することがよくあります。これには、div を水平方向に中央に配置する必要があります。次に、 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>レンダリング:
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 タグ インデックス: https://www.html.cn/sitemap.html
概要: 上記がこの記事の全内容です。この記事が、div を中心に配置する方法を学ぶのに役立つことを願っています。ページ＃＃＃
以上がHTMLでdivを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。