css中img水平居中怎麼設置

透過CSS 設定img 元素水平居中的方法有四種：1. 使用text-align 設定父元素居中；2. 使用margin: auto 使元素相對於父元素居中；3. 採用flexbox，設定父元素display 為flex 並justify-content 為center；4. 利用網格佈局，創建網格並放置img 元素在居中單元格中。

CSS 中 img 水平居中的設定

如何水平居中 img 元素？

在CSS 中，有幾種方法可以水平居中img 元素：

1. text-align

最簡單的方法是使用text-align 屬性將img 元素的父元素設定為居中。

<code class="css">.parent-container {
  text-align: center;
}</code>

2. margin: auto

另一種方法是使用margin: auto，這將使img 元素相對於其父元素居中。

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

3. flexbox

使用flexbox 佈局，也可以透過設定父元素的display: flex 和justify-content: center 來水平居中img 元素。

<code class="css">.parent-container {
  display: flex;
  justify-content: center;
}

img {
  align-self: center;
}</code>

4. grid

使用網格佈局，可以建立一個網格，然後將 img 元素放置在網格中的居中單元格中。

<code class="css">.parent-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

img {
  grid-column: 2;
}</code>

選擇合適的方法

選擇哪一種方法取決於您專案的特定要求。對於大多數情況，使用 text-align 或 margin: auto 就足夠了。但是，如果需要更進階的佈局或控制，flexbox 或網格佈局可能是更好的選擇。

以上是css中img水平居中怎麼設置的詳細內容。更多資訊請關注PHP中文網其他相關文章！