Question

我有一个外部div，其text-align : center;主要用于强制左右边框之间的间距为margin-left: auto;＆amp; margin-right:auto;没有做到！如何让外部div中的div左对齐而不是居中对齐？这是一个示例小提琴http://jsfiddle.net/3mb4to76/5/，其中第三个框需要位于第一个框下方？

.bor{
    border:1px solid;
    width:100px;
    height:100px;
    margin:15px;
    display:inline-block;
}
.outer{
    width:300px;
    height:300px;
    border:1px dotted;
    text-align: center;
}

Answer 1

为什么不使用百分比宽度和边距来保持相等的间距？

.bor{
    border:1px solid;
    width:40%;
    height:100px;
    margin:5%;
    float:left;
    box-sizing:border-box;
}
.outer{
    width:300px;
    height:300px;
    border:1px dotted;
    box-sizing:border-box;
    padding:2%;
}

http://jsfiddle.net/3mb4to76/1/

Answer 2

您可以删除父div的text-align：center并使用padding作为外部div。对于子div中的数据，您可以使用

.outer .bor { text-align:center; }

Answer 3

看看你的小提琴，父容器将把所有子元素放在中心，例如“申报单”。我建议您在外部容器中设置填充以使内部div更多，或者在第3个元素上设置一个浮动，使其位于第一个元素下方。

这两种解决方案都取决于你，最后你的需求就是一个例子。

浮动解决方案

https://jsfiddle.net/3mb4to76/

.bor{
    border:1px solid;
    width:100px;
    height:100px;
    margin:15px;
    display:inline-block;
    float:left;
}
.outer{
    width:300px;
    height:300px;
    border:1px dotted;
    text-align:center;
}

填充解决方案

https://jsfiddle.net/3mb4to76/

.bor{
    border:1px solid;
    width:100px;
    height:100px;
    margin:15px;
    display:inline-block;
}
.outer{
    width:300px;
    height:300px;
    border:1px dotted;
    padding:20px;
}

百分比解决方案

https://jsfiddle.net/3mb4to76/1/

.bor{
    border:1px solid;
    width:45%;
    height:100px;
    box-sizing:border-box;
    float:left;
    margin-bottom:25px
}
.bor:first-of-type {
    margin-right:10%;
}
.outer{
    width:300px;
    height:300px;
    border:1px dotted;
    box-sizing:border-box;
    padding:2%;
}

您也可以使用:nth-child();元素始终定位第一个框或第二个框，无论您选择哪个

希望这可以解决您的问题！

在Centered Div中左对齐

3 个答案: