javascript - 为什么无论设置样式如何，我的组（文本和图像）都不会在中间垂直对齐并水平居中？

目前我使用的是可缩放矢量图形，这意味着我使用的是<g ..>标签而不是<div ...>. 奇怪的是，我唯一没有标题组的节点是将文本垂直对齐在中间。当有标题组 ( <g class="title-group" ...>) 时，文本不会对齐。这是正确的图像...

这是有标题组时会发生的情况-

我正在使用 JavaScript、CSS 和生成 HTML。我已经从字面上指定vertical-align: middle了所有地方都无济于事。另外，我还有另一个问题。我希望标题组在<g class="body-box" ...>. 这是我想要的图片，而不是您之前看到的图片。

请帮忙。我觉得我什么都试过了。如果您需要查看代码，请在评论中询问您要查找的内容。

标签： javascripthtmlcss

问题不在于 CSS，而在于<g...>标签。我没有在 g 标签上使用样式，而是将 g 标签转换为<svg...>标签并调整了 x 和 y 参数，这能够将图像完美地对齐到我想要的确切位置。