css - 如何使内容相对于单元格居中？

Question

我这里有个 fiddle :

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 提到的，您的文本已经居中。我已经更新了你的 fiddle 来说明发生了什么。 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;
}