通過比父母小的父母對齊的文本對齊

Question

我希望孩子能夠對父母對齊。父母較小，這就是導致問題的原因。 https://jsfiddle.net/mkvaL7uy

我在這裏看到的唯一解決方案是給父母一個固定的寬度 - 使它真的很寬+ height:0px，創建另一個元素來替換不可見的父母，之後孩子可以正確對齊。 https://jsfiddle.net/mkvaL7uy/1

是否還有其他一些非寬度依賴方式做到這一點？

Answer 1

有一個答案實現這一目標在這裏：Centering div that is wider than its parent without setting negative left margin

答案還指出，這種小提琴：http://jsfiddle.net/danield770/msVVD/2/。

或者，您可以使用兩個元素之間的相對位置而不設置寬度的規則。一個需要注意的是，inner永遠是取決於outer的寬度和inner絕不會窄於outer：

.outer { 
 
    background: beige; 
 
    display: inline; 
 
    position: relative; 
 
    text-align: center; 
 
    margin-left: 100px; 
 
} 
 

 
.inner { 
 
    background: pink; 
 
    position: absolute; 
 
    left: -50%; 
 
    right: -50%; 
 
}

<div class="outer"> 
 
    This text is short. 
 
    <div class="inner">This text is not much longer than the one above.</div> 
 
</div>