CSS文本对齐问题（段落下的潜台词）

Question

我遇到了 CSS 问题。

我有一个固定宽度的 div 和里面的文本。文本居中，不占容器的整个宽度。

我希望在居中的文本段落正下方有一段潜台词，但是副台词需要右对齐。不是容器的右边，而是文本的右边（在这种情况下，它是一个段落），所以它按照我在下面的说明排列。我看到的问题是段落宽度不是绝对的。

我怎样才能做到这一点？

黑色是容器，文字是居中的文字，副文字需要对齐到段落宽度的右边，而不是容器宽度。绿线表示段落文本在 div 容器中居中。红线是段落的尺寸，但这取决于文本，不是设定值。

段落'text text text'将始终是可变长度和宽度的一行。子文本需要动态对齐段落宽度的右侧。

Answer 1

<div class="container">
    <p>
        centered text
        centered text
        <span>right text</span>
    </p>
</div>

该结果的 CSS。

.container {
    text-align: center;
}
.container p {
    display: inline-block;
}
.container p span {
    display: block;
    text-align: right
}