javascript - 如何使用 javascript、html 和/或 css 获取两个元素并将它们居中？

Question

这是一张图片:

我想要的是克莱斯勒图像位于框的中央，顶部有 Sample size: 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>

这是 CSS。

.mitch-d3-tree.boxed-tree .node.selected .body-group .body-box {
    cursor: inherit;
    pointer-events: none
}

.mitch-d3-tree.boxed-tree .node .d3plus-textBox,
.mitch-d3-tree.boxed-tree .node .body-group .body-box,
.mitch-d3-tree.boxed-tree .node .title-group .title-image {
   vertical-align: middle;
    cursor: pointer;
}

.mitch-d3-tree.boxed-tree .node .title-group .d3plus-textBox text {
   vertical-align: middle;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    fill: white
    transform: translateY(0.15em)
}
.mitch-d3-tree.boxed-tree.default .node.collapsed .body-group .body-box text {
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    fill: white
}

.mitch-d3-tree.boxed-tree.default .node.selected .body-group .body-box text {
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    fill: white
}

.mitch-d3-tree.boxed-tree.default .node .body-group .body-box {
    rx: 6;
    ry: 6
}

.mitch-d3-tree.boxed-tree.default .node .title-group .title-image {
    rx: 10;
    ry: 10
}

.mitch-d3-tree.boxed-tree.default .node .title-group text {
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    fill: white
}

我要的是这个-

Here is the js-fiddle.

Answer 1

将 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) + ")")