[英]HTML element right-aligned to edge of sibling centered element
I would like to get a specific layout using CSS, as follows, and I'm not sure if it's possible. 我想使用CSS获取特定的布局,如下所示,但我不确定是否可行。 There's some text inside a div that is centered. 在居中的div内有一些文本。 Underneath, there is another div with text inside; 在下面,还有另一个带有文本的div; what I'd like to do is to right-align this text so that its right edge is flush with the right edge of the text above it. 我想做的是将此文本右对齐,以便其右边缘与上方文本的右边缘齐平。
Using CSS, I have no idea how to do this. 使用CSS,我不知道如何执行此操作。 Clearly the following approach will not work, because the sub-header will right-align to the container. 显然,以下方法将不起作用,因为子标题将与容器右对齐。 But is there any trick to accomplish the alignment I want? 但是,有什么技巧可以完成我想要的对齐吗?
<div style='text-align: center;'>This is some headline text</div> <div style ='text-align:center;'>这是一些标题文字</ div>
<div style='text-align: right;'>Sub-header text</div> <div style ='text-align:right;'>子标题文本</ div>
Note: Strong preference is for straight CSS (no Javascript if possible). 注意:强烈建议使用纯CSS(如果可能,则不要使用Javascript)。
Note #2: I'm not stuck with the above HTML. 注意#2:我不拘泥于上述HTML。 I can use any markup that accomplishes the described alignment. 我可以使用完成上述对齐方式的任何标记。
@thirtydot no, I'm happy with any HTML that will accomplish the alignment. @thirtydot不,我对将完成对齐的任何HTML感到满意。
Try this then: http://jsfiddle.net/thirtydot/nU9Cj/ 然后尝试以下方法: 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>
You probably want to add some padding-bottom
to the div
, to make up for the height lost by the subheader being absolutely positioned. 您可能想要在div
添加一些padding-bottom
,以弥补子标题绝对定位所造成的高度损失。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.