Question

如何将3个彼此相邻的div（浮动）居中？

Answer 1

将它们放在一个包含一行和三个单元格的表格中......或者在它们周围包裹另一个div。

Answer 2

如果div具有固定的宽度，您可以向左或向右浮动它们并将它们包装在容器中。然后将该容器设置为所有3个框的组合宽度，并在容器上设置margin: auto。或者，您可以将每个框设置为display: inline-block并在父级

上调用text-align: center

FLOATING

INLINE-BLOCK

Answer 3

这里的例子是

.container{
    text-align:center;
    display:block;
    width:100%;
}

.container div{
    display: inline-block;
    width:30%;

}

Answer 4

如果你必须漂浮3个街区，那么你需要另一个div来居中，这些街区就在里面。

HTML

<section class="thing-w">
    <div class="thing">Thing</div>
    <div class="thing">Thing</div>
    <div class="thing">Thing</div>    
</section>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}


.thing-w {
    width: 900px;
    margin-right: auto; /* centers the wrapper */
    margin-left: auto;
}

.thing {
    width: 300px;
    border: 1px solid red;
    float: left;
}

jsFiddle

如果你不知道他们的尺寸...那么我建议使用内联块元素并将外包装设置为text-align: center - 它会像内联元素一样处理块，并允许你将它们居中...然后你也可以使用vertical-align: middle进行垂直对齐。

如何将3个div彼此相邻？

4 个答案: