Question

我正在试图找出如何水平居中多个DIV。我的代码看起来像这样：

HTML：

    <div id="circle">
<div id="circle1"></div>
<div id="circle2"></div>
</div>

CSS：

    #circle {
    text-align: center;
}

#circle1 {
    background: #D5DED9;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
}

#circle2 {
    background: #D5DED9;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
}

它们确实水平居中，但圆圈之间有间断，我不知道如何将它们放在一条直线水平线上。

我已经google了，但没有找到任何有用的东西..

Answer 1

您可以向display:inline-block;和#circle1

添加#circle2

此外，由于您的包装中有margin: 0 auto;，因此您div之内不需要text-align:center;。

<强> JSFiddle Demo

Answer 2

由于HTML文档中的空白将如何影响样式，因此不应使用display: inline-block来居中div之类的元素。

This jsFiddle outlines the differences. imbondbaby的内联块div在它们之间有少量的空白，只能通过消除标记中的空格来删除它们。这可能难以诊断和调试，并且之前已经咬过我。

相反，使用margin: 0 auto将div的容器居中。然后float: left其父级内的div将它们放在一起，并将clearfix应用于容器。

风格：

#wrapper {
    margin: 0 auto;
}
.clearfix {
    display: table;
    clear: both;
}
.circle {
    float: left;
}

HTML

<div id="wrapper" class="clearfix">
    <div class="circle"></div>
    <div class="circle"></div>
</div>

Answer 3

如果我已正确理解您的问题，您希望两个圆圈位于同一行，以包装器circle div为中心。

基本上，您可以float向left使用一个圆圈，向right使用另一个圆圈以使它们在同一条线上。然后，为了调整它们在包装器div中的接近程度，您可以使用百分比调整包装器div的width属性（在这种情况下，相对于div的父级body）。

以下是潜在解决方案的示例：http://jsfiddle.net/UFN5S/

顺便说一下，SO上还有其他类似的问题。我知道你说你用谷歌搜索了，但通常会有这样的问题，已经有人问过并回答了问题。

即：

How to center two divs floating next to one another

或

Aligning two divs side by side center to page using percentage width

希望有所帮助！

中心Divs水平

3 个答案: