css - 对齐文本行，使其中心为容器宽度的 70%

Question

我想将字符串与文本对齐，以便该字符串的中心位于容器宽度的 70% 的像素处。除了该字符串之外，容器中的所有其他文本行通常(左)对齐。例如，如果容器宽度为 300 像素，则文本的中心位于像素 210。

实现该目标的最佳方法是什么？如果它与更正常(左)对齐的文本共享行，有没有办法做到这一点？

更新:恐怕我不清楚我的问题。感谢所有花时间回答的人。更清楚地说，容器包含多行文本，所有文本都是正常(左)对齐的。我只想放置一个字符串，因此它的中心位于容器宽度的 70%。

Answer 1

这可能会有所帮助。相应地更改 ::before 中的宽度。让容器采用其父级的宽度。

<!-- HTML -->
<div class="container">
  Text
</div>

// CSS
.container {
  text-align: center;
}
.container::before {
  content: '';
  width: 30%;
  display: inline-block;
}

Codepen

希望这对您有所帮助。

谢谢!