ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用してDiv内で画像を水平方向と垂直方向の両方で中央に配置する方法は?

CSSを使用してDiv内で画像を水平方向と垂直方向の両方で中央に配置する方法は?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-24 09:36:12252ブラウズ

How to Center an Image Both Horizontally and Vertically Within a Div Using CSS?

Div 内で画像を中央揃えおよび垂直方向に揃える

指定された HTML スニペットの場合:

`

<画像src="img.png">
`

指定された div 内で水平方向と垂直方向の両方の中央に配置されるように画像の配置を調整するには、CSS プロパティを使用します。

画像を水平方向に中央に揃えるには、次のコマンドを使用します。

#over img {
  margin-left: auto;
  margin-right: auto;
}

これにより、画像が配置されます。

画像を垂直方向に中央に配置するには、次を使用して画像をブロックレベル要素に設定します。

#over img {
  display: block;
}

これにより、画像が div 内の利用可能なスペースの全高を占めることができます。

更新された HTML および CSS スニペットになる:

<div>
body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

以上がCSSを使用してDiv内で画像を水平方向と垂直方向の両方で中央に配置する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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