CSS 文本对齐覆盖 x y答案

【问题标题】：CSS Text align override x yCSS 文本对齐覆盖 x y
【发布时间】：2018-07-28 02:26:22
【问题描述】：

我在对齐 rec 标记中的文本时确实存在问题。遵循代码和描述案例的两张图片。

HTML：

<g class="v-label v-morphable-label viz-axis-label v-axis-item index_0" fill="#333333" font-size="10px" font-weight="normal" font-family="'72-Web',Arial,Helvetica,sans-serif" font-style="normal" categorylabel-id="0" transform="translate(0,0)">
<rect class="viz-axis-label-rect" fill="transparent" x="1" y="1" width="161.85644531" height="12.475">
</rect>
<g class="v-axis-label-wrapper">
<g>
<text x="129.52148437" y="11.2375">DACH</text>
</g>
</g>
</g>

我确实想将文本向左对齐到 rect-tag 的开头。附件是调试模式下的图片，看看哪个元素有多长以及它们如何相互配合。我用 transform:translate(-5%, -0%) 试过了。哪个有效，但它不会对齐它们仍然居中的文本，但我至少可以阅读它。更好的是文本也将左对齐。我会很感激任何提示。 text tag rect tag

【问题讨论】：

标签： css text alignment

【解决方案1】：

我不太确定你要的是什么。

您是否希望文本位于 rect 标记的内部并左对齐？像这样？

.viz-axis-label-rect {
  background-color: yellow;
  display: block;
  width: 100%;
}

g text {
  text-align: left;
}

<g class="v-label v-morphable-label viz-axis-label v-axis-item index_0" fill="#333333" font-size="10px" font-weight="normal" font-family="'72-Web',Arial,Helvetica,sans-serif" font-style="normal" categorylabel-id="0" transform="translate(0,0)">
  <rect class="viz-axis-label-rect" fill="transparent" x="1" y="1" width="161.85644531" height="12.475" style=" width: 100%; display: block;">
    <g class="v-axis-label-wrapper">
      <g>
        <text x="129.52148437" y="11.2375">DACH</text>
      </g>
    </g>
  </rect>
</g>

【讨论】：