Html 将SVG在跨度标记中居中对齐

我正在尝试将条形图居中对齐到灰色框中。我在阅读相关文章时尝试过各种方法（例如文本对齐：居中，或设置显示：块，边距：0自动），但似乎都不起作用

这是小提琴：

html：

<div id="Tile">
<h2>
     <span id="Top">0.0%</span>
</h2>
<ul class="Middle">
    <span>2.9k</span>
         USERS
    <span>BECAME ACTIVE</span>
</ul>
<div id="Bottom" >
    <div>
    <svg id="svg">
        <g transform="translate(5,5)">
            <rect y="23.33333333333333" x="15" height="11.666666666666671" width="5">
            </rect>
            <rect y="35" x="21" height="0" width="5">
            </rect>
            <rect y="25.666666666666686" x="27" height="9.333333333333314" width="5">
            </rect>
            <rect y="35" x="33" height="4.666666666666686" width="5">
            </rect>
            <rect y="25.666666666666686" x="39" height="9.333333333333314" width="5">
            </rect>
            <rect y="25.666666666666643" x="45" height="9.333333333333357" width="5">
            </rect>
            <rect y="25.666666666666686" x="51" height="9.333333333333314" width="5">
            </rect>
            <rect y="30.333333333333343" x="57" height="4.666666666666657" width="5">
            </rect>
            <rect y="32.666666666666686" x="63" height="2.3333333333333144" width="5">
            </rect>
            <rect y="32.66666666666664" x="69" height="2.333333333333357" width="5">
            </rect>
            <rect y="16.33333333333333" x="75" height="18.66666666666667" width="5">
            </rect>
            <rect y="32.666666666666686" x="81" height="2.3333333333333144" width="5">
            </rect>
            <rect y="35" x="87" height="0" width="5">
            </rect>
            <rect y="35" x="93" height="20.999999999999993" width="5">
            </rect>
            <rect y="35" x="99" height="34.999999999999986" width="5">
            </rect>
        </g>
    </svg>
    </div>
</div>

0.0%

2.9k
使用者
变得活跃起来

---

您可以给它一个宽度，然后相应地给它一个左右边距

e、 g

---

您可以给它一个宽度，然后相应地给它一个左右边距

e、 g

默认情况下，SVG元素是内联的，因此首先确保已将其设置为显示块元素。可以指定居中的边距，并将图元装入其父容器中：

#svgContainer svg {
    display: block;
    margin: 0 auto;
}

<svg viewbox="0 0 120 80" height="80">

然后，您可以利用“viewbox”属性来确保您的SVG元素将根据其父容器的边界进行缩放：

#svgContainer svg {
    display: block;
    margin: 0 auto;
}

<svg viewbox="0 0 120 80" height="80">

在您的情况下，viewbox的宽度/高度应始终与正在显示的图形的大小相关。（假设您仍要显示整个图形。）

这里有一个关于如何在SVG元素中同时使用视口和viewbox的好参考：

默认情况下，SVG元素是内联的，因此首先确保已将其设置为显示块元素。可以指定居中的边距，并将图元装入其父容器中：

#svgContainer svg {
    display: block;
    margin: 0 auto;
}

<svg viewbox="0 0 120 80" height="80">

然后，您可以利用“viewbox”属性来确保您的SVG元素将根据其父容器的边界进行缩放：

#svgContainer svg {
    display: block;
    margin: 0 auto;
}

<svg viewbox="0 0 120 80" height="80">

在您的情况下，viewbox的宽度/高度应始终与正在显示的图形的大小相关。（假设您仍要显示整个图形。）

---

这里有一个关于如何在SVG元素中同时使用视口和viewbox的很好的参考资料：

hmm，我想让它使用较小的边距。看起来，如果我把我的右边距/左边距减少到40%以下，它会再次失去对齐。你可以用宽度来玩，这只是一个例子。只要它们加起来是100hmm，我希望它能以较小的利润率工作。看起来，如果我把我的右边距/左边距减少到40%以下，它会再次失去对齐。你可以用宽度来玩，这只是一个例子。只要它们加起来有100个附录，看起来是单个矩形的宽度弄乱了这一点。是否有CSS方法来调整这些矩形的大小？或者我需要计算它们的宽度以完全适合父容器吗？补充，看起来是单个矩形的宽度弄乱了这一点。是否有CSS方法来调整这些矩形的大小？或者我需要计算它们的宽度以完全适合父容器吗？