Question

我想将文本对齐到一个准确的位置，比如右边2厘米而不是像左，右和中间的预稳定位置。有一个例子：Example 如何将常规，升级和排他性案例集中在一起？

Answer 1

根据我的评论，这里是文本的居中方式，但价格标签包含在文本的内联元素中。

HTML

<p class="container">
  Text goes here
  <span class="block">
    $3
  </span>
</p>

CSS

.block {
  padding: 4px;
  background: lightblue;
  border-radius: 2px;
  margin-left: 4px;
}

.container {
  max-width: 400px;
  text-align: center;
  border: 1px solid;
}

编辑：

根据您提供的其他信息，不仅可以调整您遇到问题的文字，还可以调整布局。

我已更新了我的示例，以展示如何使用text-align: center;对齐容器中的元素，并将不同的文本/价格项转换为display: inline-block;。

这只是一个让您入门的切入点。还有许多其他方法可以使用CSS布局内容，包括浮点数，弹性框和新的CSS网格。我建议您仔细检查每个项目以确定适合您项目的内容。

更新演示：https://codepen.io/scottohara/pen/oWLxXN

如何将文本定位到准确位置

1 个答案: