html - 调整窗口大小时，body/maindiv 的居中消失

Question

您好，我有一个小的 css 问题......只是想不通，我已经用谷歌搜索过了，所以；我有一个主 div，里面有 div，我的想法是，当它打开一个较小的屏幕时，div 应该出现在彼此下方，确实如此.. 我的问题是在计算机屏幕上它在窗口中居中，但是，一旦我调整窗口大小，使第一个 div“跳”到下一行，似乎居中消失了，它又卡在了左侧.....请帮助...我希望 div 总是居中！

js小提琴：jsfiddle.net/VCk2x/

Answer 1

如果您试图以这种方式完成响应式布局，那么您做错了。
我建议阅读一些基本的响应式教程。

但是，要将您的#mainDiv 居中：

#mainDiv {
    margin:0 auto;
}

Answer 2

这是一个似乎可以满足您要求的示例：

HTML：

<ul class="int">
<li><div class="pic">boite 1</div></li>
<li><div class="pic">boite 2</div></li>
<li><div class="pic">boite 3</div></li>
<li><div class="pic">boite 4</div></li>
<li><div class="pic">boite 5</div></li>
<li><div class="pic">boite 6</div></li>
<li><div class="pic">boite 7</div></li>
<li><div class="pic">boite 8</div></li>
</ul>

CSS：

div.pic {
    display:table-cell;
    width: 250px;
    height: 180px;
    background: #ff9933;
    margin:0;
    padding: 6px 6px 6px 6px;
    border-style: dashed;
    border-width: medium;
    border-color: green;
    text-align: center;
    vertical-align:middle;
}

ul.int {
    padding:0;
    list-style-type:none;
    margin:4% auto ;
    text-align: center;
}

ul.int li {
    margin: 12px 12px 12px 12px;
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:middle; 
}

ul.int.droite {direction:rtl;}

这是jsfiddle：http: //jsfiddle.net/CMUjT/

Answer 3

我不明白你的问题，但我认为你的块不应该一起显示为内联，如果这是正确的。添加width: {your width}px;in#mainDiv也设置为显示为块。