css - 没有固定宽度的中心？

Question

演示http://jsfiddle.net/W86yx/

我想摆脱 .center 中的 300px。我希望 main 下的所有 3 个 div/p 居中。在不固定宽度的情况下如何做到这一点？我希望 .tblInsideHere 上方的 div/p 更加居中。div/p 应该对齐，因为宽度是相同的（相同的文本）。然后 tblInsideHere 应该更多地从左侧开始，并在前一个 div/p 的右侧结束。我如何将其居中？

CSS：

.main {
    background-color:green;
    width: 400px;
    margin: 0 auto;
}
.center {
    margin: 0 auto;
    width: 300px;
    background-color:pink
}
.tblInsideHere > div {
    float: left;
}

html:

<div class="main">
    <div class="center">
        blah 
        <span> blah text</span>
        <span> blah text</span>
    </div>
    <p class="center">
        blah 
        <span> blah text</span>
        <span> blah text</span>
    </p>
    <div class="tblInsideHere center">
        <div>blah text blah text</div>
        <div>blah text blah text</div>
    </div>
</div>

Answer 1

乐意效劳 ：）

.main {
    background-color:green;
    width: 400px;
    margin: 0 auto;
}
.center {
    text-align:center;
    background-color:pink
}
.tblInsideHere > div{
    display:inline-block;
}