Question

我不确定我做错了什么，但我只是想把这个放在中心，同时还能处理响应。

想要让所有div都居中但是边距：auto不起作用..可能缺少一些简单的东西。

我在颜色div中有一些图像，这就是我实际上无法居中的部分。

这是一个jsfiddle。

HTML在

之下

<div class="wrapper">
    <div class="row">
        <div id="red">
<img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        </div>
        <img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        <div id="green">
        </div>

        <div id="blue">
<img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        </div>

    </div>
</div>

以下示例CSS

   html,body  {
background: #FFFFFF;
font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
margin: 0 auto;
height: 100%;
width: 100%;
} 


.wrapper {
max-width: 96%;
height: 100%;
width: 90%;
}

.row {
float:left;
margin: 0 auto;
width: 100%;
height: 30%;
}

#red {
    background-color:red;
    height:30%;
width: 30%;
    float:left;
}

#green {
    background-color:green;
    height:30%;
width: 30%;
        float:left;
}

#blue {
    background-color:blue;
    height:30%;
width: 30%;
        float:left;
}

Answer 1

而不是在html，body中创建margin: 0 auto;，而不是在包装类中使用它

检查以下小提琴： jsFiddle Demo

Answer 2

如何制作div width:33.3%并将margim:0 auto;放在包装器上？

检查出来：

http://jsfiddle.net/38L6Y/15/

Answer 3

比我第一次意识到的问题还要多。

你的一些百分比没有多大意义。

当你使一个元素说90％时，它是它的父元素的90％。因此，每当你在另一个元素中使用90％的div时，它将比它的父级小10％。

我还将margin：0 auto移动到包装器，因为这似乎更有意义。

请试一试。

html,body  {
background: #FFFFFF;
font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
height: 100%;
width: 100%;
} 


.wrapper {
margin: 0 auto;
height: 100%;
width:90%;
}

.row {
height: 30%;
}

#red {
background-color:red;
height:30%;
width: 33.33334%;
float:left;
}

#green {
background-color:green;
height:30%;
width: 33.33333%;
float:left;
}

#blue {
background-color:blue;
height:30%;
width: 33.33333%;
float:left;
}

Answer 4

试试这个。

html,body  {
 background: #FFFFFF;
 font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
 align:center!important;
 height: 100%;
 width: 100%;
}

Answer 5

或者你可以尝试这个（如果你仍然希望每个div里面.row类的宽度= 30％）

选中此JSfiddle

.row {
width: 100%;
height: 30%;
margin-left:5%; /*(100%-(30%*3))/2*/

}

由于你的div（红色，绿色，蓝色）的宽度= 30％，因此，margin-left和right应为5％。这就是为什么我使用margin-left：5％，因为只剩下width = 10％。 10％/ 2 = 5％。

很抱歉，如果这不是解决方案。

已更新： 在每个div中查看此更新后的JSFiddle与您的图片。

中心浮动div，边距自动不起作用

5 个答案: