css - セルを基準にしてコンテンツを中央揃えにする方法は？

Question

私はここにフィドルを持っています：

http://jsfiddle.net/robvious/e5QVZ/

セクションテキストを使用可能な空白の中央に配置しようとしていますが、右側に固定されているようです。「セル」を基準にして中央に配置するにはどうすればよいですか？

<aside id="side-browser">
    <a href="#">Folder One</a> <br/>
    <a href="#">Folder Two</a><br/>
    <a href="#">Folder Three</a><br/>
</aside>
<section>
    <h1>Section Content</h1>
</section>

section {
    text-align: center;
    display: table-cell;  
}

aside {  
    display: table-cell;  
    width: 300px;
} 

Answer 1

section {
    text-align: center;
    display: table-cell; 
    float:left;
    width:100%;
}

Answer 2

PSCoderが述べたように、テキストはすでに中央に配置されています。何が起こっているのかを説明するためにあなたのフィドルを更新しました。http://jsfiddle.net/e5QVZ/28/

3bu1がほのめかしているように、希望する効果が得られるまで幅を調整する必要があります。

明確にするために、500pxの固定幅のコンテナdivを追加しました。

#container{width:500px;border:1px dotted #09c;}
section {background-color:#afa;
    text-align: center;
    display: table-cell;
    margin:0 auto;
    width:200px;
}

aside {background-color:#faa;  
    display: table-cell;  
    width: 300px;
}