居中位置绝对元素内绝对父母与最大宽度

我有一个h2绝对位于父母div绝对位置，这也是绝对定位。父div的最大宽度为350px，我想要做的就是将其中的h2居中。我不想在h2上设置left:0和right:0，因为这会拉伸以填充350px的最大宽度，而不是我希望h2的宽度增加，如果添加更多内容。绝对定位h2是一项要求。居中位置绝对元素内绝对父母与最大宽度

Codepen：http://codepen.io/styler/pen/mAyIt

CSS

.tt { 
    max-width: 350px; 
    min-height: 45px; 
    text-align: center; 
    position: absolute; 
    left: 0; 
    right: 0; 
    background: #8F9924; 

    .tt-content { 
    border: 2px solid black; 
    background: #ACC95F; 
    position: absolute; 
    bottom: 0; 
    padding: 5px 10px; 
    } 
}

HTML

<div class="tt"> 
    <h2 class="tt-content">This is the content.</h2> 
</div>

来源

2014-10-31 styler

为什么是绝对定位的要求？你不能以绝对的立场去做你自己的事情，但你有很多其他的方法来集中精力。 – Tudmotu 2014-10-31 19:56:26

如果你的文本总是一行，你可以尝试这个http://codepen.io/anon/pen/boHlC – DaniP 2014-10-31 19:59:35

嘿它需要绝对位置的原因是因为文本会动态改变，但每次从底部每次收到一条新线，意味着它需要固定在底部。希望已经足够清楚 – styler 2014-10-31 20:08:15

中心绝对定位的元素是这样的：

假设500px宽度元素：

#heading { 
    margin-left: 50%; 
    left: -250px;/* negative half-width */ 

}

更新：对不起，应该更好地关注这个问题。

如果您需要动态宽度，请考虑相对定位。然后在父母上使用text-align:center;。

更新2：你还需要在你的H2元素上：display:inline-block; 这将使div的宽度与子内容保持一致。

来源

2014-10-31 19:57:17

@Danko谢谢你指出这一点。我的错。答案已更新。 – 2014-10-31 20:01:29

您可能会发现这有助于。

.tt-content { 
    ... 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

参考：http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

笔的叉：http://codepen.io/jakeparis/pen/CGjni

来源

2014-10-31 20:21:15 JakeParis

试试这个

h2{ 
width: 100%; 
position: absolute; 
left: 50%; 
margin-left: -50%; 
}

来源

2014-11-03 08:22:27

居中位置绝对元素内绝对父母与最大宽度

回答

相关问题