Question

我正在构建一个两列布局，我希望将整个列保留在屏幕中心的包装器中，即使它已调整大小。我试过浮动一些CSS div但没有帮助。

这是我的布局：

<div class="wrapper"><div class="leftCol">Left</div><div class="rightCol">Right</div></div>

CSS：

.wrapper{ width:720px; text-align:centre;} 
.leftCol{ width:200px; float:left;} 
.rightCol{ width:510px; float:right;}

Answer 1

您需要做的就是设置包装器

CSS：

.wrapper { width:720px; margin:0px auto;}

此外，我建议使用更具响应性的CSS百分比来适应宽度，这样在较大的屏幕上看起来不会很小。

Answer 2

您可以在包装类上尝试边距技巧。

{{1}}

Answer 3

Float 会从静态文档流中删除子DIV元素。
作为block-level元素的DIV元素，除非设置为inline或inline-block，否则在任何情况下都不会应用于父级text-align属性。

你有更多的可能性，最常见的是：

.wrapper{
    width: 720;
    margin: 0 auto; /* keeps me centered */
    overflow: auto; /* to contain floated child elements.
                    Or use a .clearfix  http://nicolasgallagher.com/micro-clearfix-hack/ */
}

或使用text-align: center;

.wrapper{
    width: 720;
    margin: 0 auto; /* keeps me centered (use anyways) */
    text-align: center; /* my children are not block-level elements */
}
.leftCol{
    display:inline-block;
    width:200px;
    /* text-align: left; probably you might want to reset text alignment */
} 
.rightCol{
    display: inline-block;
    width:510px;
}

我不鼓励您使用（2016年。+）固定宽度。使用其他更具响应性的单元，例如%或vw

Answer 4

请尝试以下css

.wrapper{ width:720px; text-align:centre; margin: 0 auto;} 
.leftCol{ width: 30%;  margin: 0 auto; display: inline-block;} 
.rightCol{ width: 70%; margin: 0 auto; display: inline-block; }

如何将div定位到中心？

4 个答案: