居中位置絕對元素內絕對父母與最大寬度

我有一個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

居中位置絕對元素內絕對父母與最大寬度

回答

相關問題