如何使用 CSS 將 SVG 置於 Div 容器的中心？

使用CSS 將SVG 在Div 容器中居中

嘗試將SVG 在div 中居中時，如果div 和SVG 可能會遇到困難儘管將邊距設為“自動”，但其寬度卻有所不同。

理解問題：

SVG 預設呈現為內聯元素。這意味著它們的行為類似於文本，因此設定“margin: auto”僅影響左右邊距。在您的情況下，預設的左邊距為零不受影響，從而導致與中心的偏移。

解決方案：

1. 設定顯示：區塊：

透過在CSS 中加入「CSS display: block」將SVG 轉換為區塊元素。這將允許「margin: auto」將 SVG 在 div 內水平居中。

示例：

svg {
  display: block;
  margin: auto;
}

2. 使用文本對齊：居中：

將SVG 保留為內聯元素，並在父div 上設定“text-align: center”。這會將所有內聯元素（包括 SVG）與 div 中心對齊。

範例：

div {
  text-align: center;
}

svg {
  margin: 0 auto;
}

3. Flex 或網格佈局：

或者，利用Flex 或網格佈局將SVG 在父元素內居：

Flexbox:

.container {
  display: flex;
  justify-content: center;
}

svg {
  margin: auto;
}

網格：

.container {
  display: grid;
  justify-content: center;
}

svg {
  grid-column: 1;
}

以上是如何使用 CSS 將 SVG 置於 Div 容器的中心？的詳細內容。更多資訊請關注PHP中文網其他相關文章！