javascript - 如何根据可变左百分比对齐文本

Question

我有两个我想要的 div 的非常奇特的安排。基本上有父母和孩子。子 div 需要距离父级的左边界 ax%，其中 x 是可配置的。此外，子 div 中的文本是可配置的，但子元素的中心需要始终位于父元素左侧 x% 的位置。

.parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position:relative;
}

.child {
  margin-left: {x%};
}

<div class='parent'>
  <div class = 'child'>
      Correct Answer
   </div>
</div>

例如，当左起百分比为 30% 时：

left percent 仍然是 30%，但文字更小：

剩余百分比为 0%：

剩余百分比为 100%：

标签： javascripthtmlcssreactjs

Answer 1

如果我理解正确 - 你所需要的只是申请：transform: translateX(-50%);对孩子。

请参阅：https ://codepen.io/anon/pen/ewONox

问候