Question

我想将字符串对齐一个文本，以便该字符串的中心位于容器宽度的70％的像素处。除了该字符串之外，容器中的所有其他文本行通常（左）对齐。例如，如果容器宽度为300px，则文本的中心位于像素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

希望这有帮助。

谢谢！

Answer 2

您可以通过将文本放在容器内的内部跨度中来伪造此对齐，并相应地定位该跨度

容器上的

：

position: relative;

内跨：

  position: absolute;
  left: 70%;
  transform: translate(-50%, 0);

请参阅here

Answer 3

这个怎么样？

#thediv {
  background-color: lightgray;
  width: 70%;
  height: 100px;
}

.container {
  background-color: gray;
  height: 200px;
}

<div class="container">
  <center>
    <div id="thediv">
    text text text text text text text text
    text text text text text text text text
    text text text text text text text text
    text text text text text text text text
    </div>
  </center>
</div>

对齐文本行，使其中心将是容器宽度的70％

3 个答案: