css - 我想在中心对齐网格

Question

如您所见，我的代码 grid_2 向左浮动。所以我添加了中心类以将其固定在中心但 div block 向左浮动。我想把这个 grid_2 div 放在中心。谁能帮我解决这个问题？

HTML代码:

<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/