Demo

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/

如果我修复了包装器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;
}

Answer 2

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

只需添加宽度（例如100PX）即可获得div中心

Answer 3

尝试使用display:table

标记：

<div class="outer" style="margin: 0 auto">
    <div class="inner" style="background: red;">
        sdf
    </div>
    <div class="inner" style="background: red;">
        sdfsd
    </div>
</div>

的CSS：

.outer{
    display:table;
    border-spacing:10px;
}
.inner{
    display:table-cell;
}

居中两个可变宽度列

3 个答案:

Demo