Question

我想将两个<div>水平相对于彼此居中。

以下是基本设置：

css：

#outerdiv {
    width: 100%;
    overflow: auto;
}
#reddiv {
    width: 1500px; 
    background-color: red;
    height: 50px;
}
#bluediv {
    width: 100px; 
    background-color: blue;
    height: 50px;
}

HTML：

<div id="outerdiv">
    <div id="reddiv"></div>
    <div id="bluediv"></div>
</div>

（http://jsfiddle.net/db545/）

因此bluediv应位于reddiv下方。

重要提示：

我事先并不知道元素的宽度。因此，仅设置margin-left左右将无效。
bluediv不应相对于页面宽度居中，而应相对于reddiv。因此，只需将margin: 0 auto设置为它也不起作用。

Answer 1

如果您可以添加另一个div，可以将bluediv和reddiv放入其中并使用margin: 0 auto;将bluediv置于reddiv中心以获得更好的结果。这在我测试它的所有主要浏览器上都能很好地工作。

<强> HTML：

<div id="outerdiv">
    <div id="innerdiv">
        <div id="reddiv">
        </div>
        <div id="bluediv">    
        </div>
    </div>
</div>

<强> CSS：

#outerdiv {
    width: 100%;
    overflow: auto;
}
#innerdiv{
    display: table;
}
#reddiv {
    width: 1500px; 
    background-color: red;
    height: 50px;
}
#bluediv {
    width: 100px;
    margin: 0 auto;
    background-color: blue;
    height: 50px;
}

我为你设置了一个JSFiddle：http://jsfiddle.net/db545/11/。

Answer 2

我需要一个围绕蓝色和红色div的额外div来居中它们：

小提琴：http://jsfiddle.net/db545/8/

HTML：

<div class="component">
    <div class="component-inner">
        <div class="component-large">
            This text right is centered<br>nd also aligned with its sibling content
        </div>
        <div class="component-centered">This text is also centered</div>
    </div>
</div>

CSS：

.component {
    width: auto;
    overflow: auto;
}
.component-inner {
    width: 100%;
    display: table;
}
.component-large {
    width: 1500px;
    min-height: 50px;
    text-align: center;
    background-color: red;
}
.component-centered {
    display: table;
    width: 100px;
    height: 50px;
    margin: 0 auto;
    text-align: center;
    color: white;
    background-color: blue;
}

中心在没有知道宽度的情况下相对于彼此水平地划分溢出

2 个答案: