Question

如何将div块与中心对齐。我不需要左右空间。我需要清楚的代码是对齐内联元素

<div class="wrapper">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>        
</div>

.wrapper{ 
    border:1px solid red;
    width:980px;
    text-align:center
}

.block{
    border:1px solid green;
    width:200px;
    height:100px;
    display:inline-block;
    vertical-align:top;
}

我可以这样做： https://jsfiddle.net/yhocvf7p/

.wrapper{ 
    border:1px solid red;
    width:980px;
    text-align:left
}

.block{
    border:1px solid green;
    width:240px;
    height:100px;
    display:inline-block;
    vertical-align:top;
    margin-right:123px;
}

.block:nth-child(3){
    margin-right:0;
}

但它不是我需要的。

Answer 1

如果我正确理解了你想要的结果，那就是块水平堆叠，然后当它们用完房间时出现在下一行的中心，你应该能够用text-align:center属性来实现这个

https://jsfiddle.net/y7rtptxr/1/

#wrapper {
    border:red 1px solid;
    text-align:center;
    width:260px;
}
#wrapper .block {
    background:green;
    border:#000 1px solid;
    height:40px;
    width:60px;
    display:inline-block;
}

Answer 2

如果我说对了你，你可以在你的容器上使用font-size: 0;，然后为你的孩子设置所需的font-size，这样你就可以获得this。

Answer 3

您需要this之类的内容吗？ http://jsfiddle.net/x2pmjkww/

如何将div块与中心对齐（无边距）

3 个答案: