右對齊到兄弟中心元素的邊緣的HTML元素

我想使用CSS獲得特定的佈局，如下所示，並且我不確定是否可能。 div中有一些以文字爲中心的文字。在下面，還有另一個帶有文本的div。我想要做的是右對齊該文本，使其右邊緣與其上方文本的右邊緣齊平。右對齊到兄弟中心元素的邊緣的HTML元素

使用CSS，我不知道如何做到這一點。很明顯，以下方法將無法工作，因爲子標題將與容器正確對齊。但是有沒有什麼竅門可以完成我想要的連接？

~~< DIV風格= '文本對齊：中心;'>這是一些標題文字</DIV>~~

~~< DIV風格= '文本對齊：右;'>子標題文本</DIV>~~

注：強烈偏好是直的CSS（沒有使用Javascript如果可能的話）。

注＃2：我沒有堅持上述的HTML。我可以使用任何完成所描述的對齊的標記。

來源

2012-05-11 McGarnagle

你堅持使用該HTML嗎？ – thirtydot

不可能使用您的HTML標記 –

@thirtydot不，我很滿意任何可以完成對齊的HTML。 – McGarnagle

@thirtydot不，我很滿意任何能夠完成對齊的HTML。

試試這個，然後：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>

你可能想一些padding-bottom添加到div，以彌補由該子頭被絕對定位丟失的高度。

來源

2012-05-11 23:40:19 thirtydot

太棒了，謝謝！ – McGarnagle

這真是令人印象深刻 – Jason

右對齊到兄弟中心元素的邊緣的HTML元素

回答

相關問題