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

正如 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;
} 

Answer 2

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