首頁 > web前端 > css教學 > 主體

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

Linda Hamilton
發布: 2024-11-02 02:18:30
原創
914 人瀏覽過

How to Center an SVG Within a Div When the Widths Differ?

在 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板