父级小于子级的CSS文本对齐[关闭]

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>