HTML 元素右对齐到同级居中元素的边缘

Question

我想使用 CSS 获得特定的布局，如下所示，我不确定是否可行。 div 中有一些居中的文本。在下面，还有另一个包含文本的 div；我想要做的是右对齐此文本，使其右边缘与其上方文本的右边缘齐平。

使用 CSS，我不知道该怎么做。显然下面的方法是行不通的，因为子标题将右对齐到容器。但是有什么技巧可以完成我想要的对齐吗？

这是一些标题文字

副标题文字

注意:强烈建议使用纯 CSS(如果可能，不要使用 Javascript)。

注意 #2:我并没有受制于上面的 HTML。我可以使用任何能够完成所述对齐的标记。

Answer 1

@thirtydot no, I'm happy with any HTML that will accomplish the alignment.

然后试试这个:http://jsfiddle.net/thirtydot/nU9Cj/

<div style='text-align: center'>
    <span style="position: relative">This is some headline text
        <span style='position: absolute; top: 100%; right: 0; font-weight: bold'>Sub-header text</span>    
    </span>
</div>

您可能想向 div 添加一些 padding-bottom，以弥补因绝对定位子标题而丢失的高度。