検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して要素を親 Div 内の中央に配置するにはどうすればよいですか?

CSS を使用して要素を親 Div 内の中央に配置するにはどうすればよいですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-25 03:06:12933ブラウズ

How to Center an Element Within Its Parent Div Using CSS?

親内の要素を中央揃えにする

left: 50%; を使用して HTML 要素を中央揃えにすると、要素が揃えられます。ブラウザウィンドウ全体で。ただし、要素を特にその親

内で中央に配置するには、

これを実現するには、text-align:center; を割り当てます。親

にコピーします。これにより、子要素を含む
内のすべてのコンテンツが中央に配置されます。

次に、margin:auto; を追加します。子要素に。これにより、子要素の幅や高さに関係なく、親

内で子要素が自動的に調整されます。

CSS を使用したデモを次に示します。

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}

margin:auto であることに注意してください。 ;子要素を親

内で水平方向と垂直方向の中央に配置します。

以上がCSS を使用して要素を親 Div 内の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html auto using this margin
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：「タグ」の「type」属性は本当に必要ですか?次の記事：「タグ」の「type」属性は本当に必要ですか?

関連記事

続きを見る