如何将文本定位到一个精确的位置

-1

我想将文本对齐到一个精确的位置，比如从右边2cm，而不是像右，左和中间那样的预稳定位置。有一个例子：Example 我该如何将常规，升级和独占案例集中起来？如何将文本定位到一个精确的位置

来源

2017-04-21 xVendetta

这些设置为文本对齐中心。 [$＃]块与居中文本内联，这就是为什么它不会居中...但它是如果你包含这些元素 – scottohara

我什么都不明白 – xVendetta

我在我提交的答案中进一步概述。既然你发布的例子只是一个屏幕截图，我不得不继续猜测。但在屏幕截图上判断，我的答案，其他样式，应该完成屏幕截图所反映的 – scottohara

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

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

来源

2017-04-21 22:01:25 scottohara

你知道为什么如果我改变字体/颜色文本将不会对齐了吗？任何方式？ – xVendetta

更改字体或颜色不应影响对齐。听起来你可能在你的CSS中有错误。如果您发布的代码，它可以审查 – scottohara

http://i.imgur.com/EbLzK7Y.png你知道如何预防它吗？ – xVendetta

如何将文本定位到一个精确的位置

回答

相关问题