html - 居中两个可变宽度的列

Question

我有两列，由固定边距分隔，宽度可变。我想将这些居中:

<div style="margin: 0 auto">
    <div style="background: red; float:left; margin-right: 10px">
        sdf
    </div>
    <div style="background: red; float:left">
        sdfsd
    </div>
</div>

这是 jsfiddle:http://jsfiddle.net/hSGTq/

如果我固定 wrapper div 的宽度，它会工作，但我不确定如何让它在可变宽度下工作。如果可能，我不想使用 Javascript。

有什么想法吗？

Answer 1

您可以在内部 div 上使用 display:inline-block 并在包装 div 上使用 text-align:center

JSfiddle Demo

HTML

<div class="wrap" style="margin: 0 auto">
    <div class="inner" style="background: red; margin-right: 10px">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="inner" style="background: red; ">
        <p>Lorem sit amet, .</p>
    </div>
</div>

CSS

.wrap {
    text-align: center;
    border:1px solid grey;
    padding:1em;
}

.inner {
    display: inline-block;
}