如何根據可變的左百分比對齊文本

Question

我要安排兩個div的特殊安排。 基本上有一個父母和一個孩子。 子div必須距父s的左邊界左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%); 繼續給孩子。

請參閱： https : //codepen.io/anon/pen/ewONox

問候