Question

我有一个h2作为容器div中的唯一项目。我设法让它使用位置对齐容器的底部：在容器上的相对位置和位置：绝对/底部：在h2上为0。但是，我无法将h2文本与容器div的右侧对齐。

HTML：

<div id="section"><h2>About Us</h2></div

CSS：

#section {
    width:277px;
    height:89px;
    position:relative;
    background-image:url(../img/sect-title-bg.png);
    background-repeat:repeat-x;
    margin:-12px 0px 0px 0px;
}

#section h2 {
    text-align:right;
    margin:0;
    position:absolute;
    bottom:0px;
}

链接：http://www.distributionaccess.com/new/stempath/about.html

我试过在h2上显示：inline-block，但没有结果。

也许有更好的方法来解决这个整体“将h2对齐到它的容器div的右下角”的事情，这就是我在这里所做的一般事情。我想要解决方案/建议！

Answer 1

向#section h2规则添加right:0并删除text-align:right。文本实际上是正确对齐的，但通过定位绝对是缩小div包装以匹配内容，因此您无法看到它。

Answer 2

摆脱h2上的position:absolute，阻止它成为正常的块级元素，因此text-align将无法按预期工作。正如评论者指出的那样，这将影响垂直定位。

否则扩展h2的宽度：

 h2 { width:280px; }

或设置right属性：

 h2 {right:0;}

Answer 3

它不在文档流程中添加宽度277px

为什么text-align：对不起这种情况？

3 个答案: