將 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>
總而言之,確保SVG顯示為區塊 - level 元素(display: block)允許您使用 margin: auto 來居中。或者,text-align: center 或 flex/grid 佈局也可以有效地在其父元素內對齊 SVG。
以上是當寬度不同時如何使 SVG 在 Div 內居中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!