css - 居中无宽度元素

Question

我试图将一个元素(一个 div 和一个 h1 放在其中)放在全宽页脚中，但遇到了一些我不明白的行为:不直到我在 footer-inner 容器中添加了一个 width(并删除了 inline-block)，它才居中，即使换出 h1 对于 img 我得到相同的结果，元素是硬左的。

HTML

<div class="footer-outer">
    <div class="footer-inner">
        <h1>Foo Barson</h1>
    </div>
</div>

CSS

.footer-outer {
    width: 100%;
    border: 2px green solid;
    position: fixed;
    left: 0;
    bottom: 0px;
}

.footer-inner {
    border: 2px red solid;
    margin: 0 auto;
    display: inline-block;
    /* width: 144px; */
}

.footer-inner h1 {
    border: 2px black dashed;
    font-size: 130%;
    text-transform: uppercase;
}

这是一个jsfiddle

我想了解元素何时是“无宽度”的。如果你能解释一下或给我指点一些读物，那就太好了。

Answer 1

为什么不能将 text-align:center 添加到 .footer-outer 中。这将使 h1 为您居中

http://jsfiddle.net/feitla/LGEen/3/