如何使用javascript、html和/或css将两个元素放在一起并将它们放在中心位置？

这是一张图片：

我想要的是克莱斯勒的图片在盒子的中央，顶部有

样本大小：173918

，这样它就不会覆盖文本。这是HTML

<g class="node collapsed" transform="translate(300, 40)">
   <g class="body-group">
      <image class="body-box" xlink:href="/static/fca%20block%20bg.png" width="200" height="75" y="-37.5"></image>
      <g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(10, 0.6399999999999988) rotate(0, 90, 22.5)" style="pointer-events: auto; fill-opacity: 1; vertical-align: middle;">
         <text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="13px" font-weight="400" x="90px" y="13px" opacity="1" style="baseline-shift: 0%; fill: white; text-shadow: rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px; font-family: &quot;Arial Narrow&quot;; font-size: 13px; font-weight: 400; opacity: 1;">Sample size: 173918</text>
      </g>
   </g>
   <g class="title-group" transform="translate(-33.333333333333336, -57.5)">
      <image class="title-image" xlink:href="/static/checkmark.png" width="100" height="40"></image>
      <g class="d3plus-textBox" id="d3plus-textBox-0" transform="translate(5, 8.48) rotate(0, 45, 18)" style="pointer-events: auto;">
         <text dominant-baseline="alphabetic" unicode-bidi="bidi-override" aria-hidden="false" dir="ltr" fill="black" text-anchor="middle" font-family="Arial Narrow" font-size="16px" font-weight="700" x="45px" y="16px" opacity="1" style="baseline-shift: 0%; fill: white; text-shadow: rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px; font-family: &quot;Arial Narrow&quot;; font-size: 16px; font-weight: 700; opacity: 1;">Chrysler</text>
      </g>
   </g>
</g>

我想要的是这个-

.mitch-d3-tree.boxed-tree.node.selected.body group.body box{
游标：继承；
指针事件：无
}
.mitch-d3-tree.box-tree.node.d3plus文本框，
.mitch-d3-tree.boxed-tree.node.body group.body box，
.mitch-d3-tree.boxed-tree.node.title group.title图像{
垂直对齐：中间对齐；
光标：指针；
}
.mitch-d3-tree.boxed-tree.node.title group.d3plus文本框文本{
垂直对齐：中间对齐；
文本阴影：
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
填充：白色
变换：translateY（0.15em）
}
.mitch-d3-tree.boxed-tree.default.node.collapsed.body group.body box文本{
文本阴影：
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
填充：白色
}
.mitch-d3-tree.boxed-tree.default.node.selected.body group.body box文本{
文本阴影：
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
填充：白色
}
.mitch-d3-tree.boxed-tree.default.node.body group.body box{
处方:6 ;；
ry:6
}
.mitch-d3-tree.boxed-tree.default.node.title group.title image{
处方:10 ;；
ry:10
}
.mitch-d3-tree.box-tree.default.node.title组文本{
文本阴影：
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
填充物：白色；
}
.标题图像{
位置：相对位置；
z指数：0；
左：80px；
}
.样本{位置：相对；
z-索引：2；}
.title组{显示：块；文本对齐：中心；}
.车身箱{
位置：相对位置；
z指数：0；
}

样本量：173918
克莱斯勒

将g元素更改为svg，并调整属性

x

和

y

，使其正常工作。在这种情况下，我设置

x=50

和

y=-40

t.append("svg").classed("title-group", !0).attr("x", "50").attr("y", "-40").attr("transform", "translate(" + -o / 3 + ", " + (-s / 2 - r / 2) + ")")

---

我的意思是，我不希望图像和文本位于表示样本大小的文本之上。我想让它看起来漂亮。这并没有回答问题。它实际上使整个程序失败…您的描述不完整且令人困惑，请发送您想担心的屏幕截图。我更新了问题，使之更清楚。检查这个，我看不到你的图像，所以我把页边空白放在顶部：-10px；你可以自己调整

t.append("svg").classed("title-group", !0).attr("x", "50").attr("y", "-40").attr("transform", "translate(" + -o / 3 + ", " + (-s / 2 - r / 2) + ")")