画像を水平方向に中央揃えするために CSS でどのような属性を使用できますか?

画像の水平方向の中央揃えは、CSS margin または text-align プロパティを通じて実現できます。 1. margin: 0 auto を使用して、中央揃えを実現するために左右のマージンが自動的に計算されるように設定します。 2. コンテナ text-align: center; と image 要素 display: inline-block; を設定して、インライン ブロック要素として中央に配置します。

画像の水平方向の中央揃えを実現する CSS 属性

CSS では、margin または text-align を設定することで画像の水平方向の中央揃えを実現できます属性。 margin或text-align属性来实现图片水平居中。

1. 使用margin属性

<code class="css">img {
  margin: 0 auto;
}</code>

margin属性设置图片元素的上下左右外边距。通过设置margin: 0 auto;，将左右外边距设置为auto，这意味着浏览器会自动根据容器的宽度计算左右外边距，从而实现图片水平居中。

2. 使用text-align属性

<code class="css">.container {
  text-align: center;
}
img {
  display: inline-block;
}</code>

text-align属性设置容器内元素的文本对齐方式。通过设置.container { text-align: center; }，将容器的文本对齐方式设置为居中。再将图片元素设置为display: inline-block;

🎜1. margin 属性🎜🎜rrreee🎜margin 属性を使用して、画像要素の上下左右の余白を設定します。 margin: 0 auto; を設定すると、左右のマージンが auto に設定されます。これは、ブラウザが左右のマージンを幅に基づいて自動的に計算することを意味します。コンテナを水平方向の画像を実現します。 🎜🎜🎜2. text-align 属性🎜🎜rrreee🎜text-align 属性を使用して、コンテナ内の要素のテキストの配置を設定します。 .container { text-align: center } を設定して、コンテナのテキスト配置を中央に設定します。次に、ピクチャ要素を display: inline-block; に設定してインライン ブロック要素にし、ピクチャを水平方向の中央に配置します。 🎜

以上が画像を水平方向に中央揃えするために CSS でどのような属性を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。