CSS文本对齐问题（段落下的子文本）

Question

我遇到了CSS问题。

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

我希望在中心文本段落下直接有一个子文本，但是子文本需要与右边对齐。不是容器的右边，而是文本的右边（在这种情况下它是一个段落）所以它排列如下所示。我认为这个问题是段落宽度不是绝对的。

我怎样才能做到这一点？

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

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

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
}