如何将文本定位到确切位置答案

【问题标题】：How can I position an text to an exactly position如何将文本定位到确切位置
【发布时间】：2017-04-22 07:39:23
【问题描述】：

我想将文本对齐到一个精确的位置，比如距离右侧 2 厘米，而不是像右、左和中心这样的预先稳定的位置。有一个例子：Example 我怎样才能像这样将普通、升级和独家案例居中？

【问题讨论】：

那些设置为文本居中对齐。 [$#] 块与居中的文本内联，这就是为什么它看起来没有居中的原因......但如果你包含这些元素
我什么都不懂
我在我提交的答案中进一步概述了。由于您发布的示例只是一个屏幕截图，因此我不得不继续进行最佳猜测。但从屏幕截图来看，我的回答加上额外的样式，应该可以完成屏幕截图所反映的内容
你需要发布代码

【解决方案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 布局内容还有许多其他方法，从浮动、flex-box 和新的 CSS 网格。我建议您检查每一项以确定适合您项目的内容。

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

【讨论】：

你知道为什么如果我改变字体/颜色文本将不再以任何方式对齐吗？
更改字体或颜色对对齐没有影响。听起来您的 CSS 可能有错误。如果您发布代码，则可以对其进行审核
对不起。如果您不发布代码，我将无法进一步帮助您。屏幕截图没有足够的信息。
嘿，我发布了代码，只需查找 css 和 html 的 man @scotohara
没有看到您已发布代码作为您自己问题的答案。您可能想要删除它并将其添加为原始问题的编辑。不过我现在去看看。