當寬度不同時如何使 SVG 在 Div 內居中？

在 Div 內對齊 SVG

將 SVG 在 div 內居中可能會帶來挑戰，特別是當 div 和 SVG 具有不同寬度時。讓我們研究一下問題中提出的問題並探索潛在的解決方案。

問題陳述

使用者嘗試使用 margin-left: auto 和 margin-right: auto 將 SVG 置於 div 中心。但是，SVG 保持向左對齊，就好像 margin-left 設定為 0 一樣。

解決方案

出現此問題的原因是，預設情況下，SVG 是內聯內容。要使其成為區塊級，您需要明確指定 display: block。執行此操作後，margin: auto 將按預期運行並將 SVG 在 div 內居中。

<code class="CSS">svg {
  display: block;
  margin: auto;
}</code>

替代方法

1. 文字對齊：您可以使用text-align: center 在父元素內對齊它，而不是修改SVG 的顯示。這種方法使 SVG 保持內聯，但將其置於父級的中心。
2. Flex/Grid 佈局：Flex 或網格佈局提供了另一種選擇。透過將父元素設定為flex或grid容器，您可以使用align-items或justify-items屬性將SVG居中。

總而言之，確保SVG顯示為區塊 - level 元素（display: block）允許您使用 margin: auto 來居中。或者，text-align: center 或 flex/grid 佈局也可以有效地在其父元素內對齊 SVG。

以上是當寬度不同時如何使 SVG 在 Div 內居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！