定心widthless元素

Question

我試圖居中全寬頁腳中的元素（一個div在它h1），並遇到了一些行爲來我不解地問：直到我添加了一個width（和刪除inline-block）至footer-inner容器是居中的，即使換出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/