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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

清浅

Apr 10, 2019 pm 04:27 PM

div 中心 margin

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を中央に配置する方法

https://www.html.cn/doc/html/layout/

HTML タグインデックス: https://www.html.cn/sitemap.html

概要: 上記がこの記事の全内容です。この記事が、div を中心に配置する方法を学ぶのに役立つことを願っています。ページ＃＃＃

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

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

CSS ボーダープロパティの詳細な説明: パディング、マージン、ボーダー Oct 21, 2023 am 11:07 AM

CSS ボーダープロパティの詳細説明: パディング、マージン、ボーダーCSS は、Web ページ要素の制御とレイアウトに使用されるスタイルシート言語です。 Web デザインにおいて、ボーダー属性は最も重要な部分の 1 つです。この記事では、CSSのborder属性の使い方と具体的なコード例を詳しく紹介します。 padding padding プロパティは、要素のパディング (要素のコンテンツと要素の境界線の間のスペース) を設定するために使用されます。正の数値またはパーセンテージ値を使用してパディングを設定できます

CSSでのマージンとは何ですか Dec 18, 2023 am 10:30 AM

CSS では、margin は要素の外側のマージンを設定するために使用されるプロパティです。マージンは、要素の境界線とそのコンテンツの間のスペースです。マージンは次の値を受け入れることができます: 1. 単一の値: たとえば、margin: 10px; 4 つのマージン (上、右、下、左) をすべて 10 ピクセルに設定します; 2. 2 つの値: たとえば、margin: 10px 20px;上下のマージンを 10 ピクセル、左右のマージンを 20 ピクセルに設定します (値は 3、4 など)。

div を別の div の中央に配置するにはどうすればよいですか? Sep 08, 2023 am 11:13 AM

はじめに div の中央揃えは、フロントエンド開発の最も重要な側面の 1 つです。この記事では、HTML と CSS を使用して、ある div を別の div の中に配置するテクニックを見ていきます。このチュートリアルでは、子 div を持つ必要がある親 div を作成します。私たちのタスクは、子 div を親 div の中央に配置することです。 Transform の変換と位置の構文を使用することは、ある div を別の div に中央揃えするあまり一般的な方法ではありません。構文 left:50%;top:50%;Transform:translate(-50%,-50%);above この構文は次のことを行います。以下 - CSS ルール「left:50%;」により、要素の水平位置が次のように設定されます。

CSS テキストレイアウトプロパティの詳細な説明: テキストオーバーフローと空白 Oct 20, 2023 am 11:19 AM

CSS のテキストレイアウトプロパティの詳細説明: テキストオーバーフローとホワイトスペース Web デザインにおいて、テキストレイアウトは非常に重要な要素であり、合理的なレイアウトにより、テキストはより読みやすく、美しくなります。 CSS には、テキストオーバーフローや空白など、テキストの表示方法を制御するいくつかのプロパティが用意されています。この記事では、これら 2 つのプロパティの使用法とサンプルコードについて詳しく説明します。 1. text-overflow 属性テキスト

margin 属性はインライン要素には影響しません Feb 18, 2024 pm 04:36 PM

インライン要素に対するマージンの影響は、ブロックレベル要素の影響とは異なります。インライン要素では、margin 属性は垂直方向の上下のマージンにのみ影響し、水平方向の左右のマージンには影響しません。たとえば、HTML に段落要素がある場合、それにいくつかのスタイルを設定し、その要素に対する margin 属性の効果を観察できます。 HTML コードは次のようになります。

HTMLにおけるマージンとはどういう意味ですか Sep 13, 2021 pm 04:26 PM

HTML では、マージンは「マージン」を意味し、要素の境界線を囲む空白領域を指します。マージンを設定すると、要素の外側に追加の「空白」が作成され、ボックス間に「空白」の距離ができるようになります。マージンを設定するには、CSS margin プロパティを使用する必要があります。このプロパティは、任意の長さ単位、パーセント値、さらには負の値も受け入れます。

CSSファイルの余白とはどういう意味ですか? Jan 30, 2023 am 09:34 AM

CSS ファイルのマージンは、要素の周囲のスペースを定義するために使用される CSS 属性です。マージンは外側のマージンを表します。要素の上下左右のマージンを個別に変更することも、すべての属性を一度に変更することもできます。 margin 属性は、任意の長さ単位、パーセンテージ値、さらには負の値も受け入れます。

CSS ボックスモデルのプロパティの探索: パディング、マージン、ボーダー Oct 20, 2023 pm 03:09 PM

CSS ボックスモデルのプロパティの調査: パディング、マージン、ボーダー CSS ボックスモデルは、Web ページレイアウトにおける重要な概念の 1 つです。フロントエンド開発では、padding、margin、border 属性を理解し、正しく使用することが重要です。この記事では、これら 3 つのプロパティの使用法と相関関係を詳しく説明し、具体的なコード例を示します。 1. ボックスモデルの概要ボックスモデルは、content、padding、bo の 4 つの部分で構成されます。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック