中心浮动div与保证金自动不起作用

Question

我不确定自己在做什么错，但我只是想以此为中心，同时仍然能够处理响应能力。

想要使所有div居中，但margin：auto无效。。可能缺少一些简单的东西。

我在div内有一些图像，这就是我居中定位困难的部分。

这是一个jsfiddle。

http://jsfiddle.net/clam22/38L6Y/22/

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

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

检查以下小提琴： jsFiddle演示

Answer 2

将divs width:33.3% margim:0 auto; width:33.3%并将margim:0 auto; 在包装纸上？

看一下这个：

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

Answer 3

问题比我最初意识到的还要多。

您的某些百分比没有多大意义。

当您说一个元素90％时，它是其父元素的90％。 因此，每次在另一个元素中进行90％的div设置时，其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

或尝试一下（如果您仍然希望.row类中的每个div的宽度为30％）

检查这个JSfiddle

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

}

由于您的div（红色，绿色，蓝色）的宽度等于30％，因此，左边距和右边距应为5％。这就是为什么我使用margin-left：5％的原因，因为只有width = 10％。 10％/ 2 = 5％。

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

已更新：在每个div中查看此更新的JSFiddle以及您的图像。