Question

如您所见，我的代码grid_2已向左浮动。所以我添加了中心类来修复它在中心但div块向左浮动。我想把这个grid_2 div放在中心位置。任何人都可以帮我解决这个问题吗？

HTML code：

<div class="center"><div class="grid_2">Content goes here  </div> </div>

CSS：

.grid_0 {
 width: 100%;
 margin-bottom: 15px;
 display: block;
}

.grid_1, .grid_2, .grid_3, .grid_3c, .grid_4, .grid_4c {
    margin-left : 1.00%;
    margin-right : 1.00%;
    margin-bottom : 15px;
    float : left;
    display : block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.center{
    display: block;
    text-align: center;
    margin: 0 auto !important;
}

.grid_1 { width: 98%; }

.grid_2 { width: 48%; }

请找到http://jsfiddle.net/kiranm/AQbS6/5/

下面的链接

Answer 1

好的，这里的问题在于grid_2的宽度。

由于grid_2的宽度=整页的48％，它总是位于页面的左侧。

只需删除网格宽度即可获得答案

如果您在其他页面上也使用相同的类，则使用以下属性添加更新您的类：

.grid_2 { width: 48%;float:none;margin: auto !important; }

演示http://jsfiddle.net/2DxsA/3/

Answer 2

在网格2上将边距设置为= auto，覆盖浮动并输入。在＃39; ve中添加了彩色边框，以便您可以看到div的位置

JSBIN Demo

.center{
    display: block;
    text-align: center;
    border:1px solid red;
}

.grid_1 { width: 98%; }

.grid_2 { width: 48%; float:none; border: 1px solid green;margin: 0 auto !important;}

Answer 3

.grid_0 {
 width: 100%;
}

.grid_1, .grid_2, .grid_3, .grid_3c, .grid_4, .grid_4c {
    margin: 0 auto;
    background-color:#f0f0f0;
}

.center{
    text-align: center;
    margin: 0 auto !important;
}

.grid_1 { width: 98%; }

.grid_2 { width: 48%; }

p{
 clear:both;
 display:block;
}

label{
 float:left;
}

您的css的简化版本以及您喜欢的结果。

我想在中心对齐网格

3 个答案: