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

Question

我对两个 div 进行了非常特殊的排列，我想拥有。 基本上有一个 parent 和一个 child 。子 div 需要距离父 div 的左边界 x%，其中 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% 时:

左边的百分比仍然是 30%，但是文本变小了:

剩余百分比为 0%:

剩余百分比为 100%:

Answer 1

如果我没理解错的话 - 您只需将:transform: translateX(-50%); 应用到 child 身上。

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

问候