Question

您好，我有一个小的CSS问题...只是无法搞清楚，我已经用Google搜索了，所以;我有一个主div，里面有div，我的想法是，当它打开一个较小的屏幕时，div应该出现在彼此之下，它确实......我的问题是在电脑屏幕上它在窗口中心，但是，一旦我调整窗口的大小，所以第一个div“跳”到下一行，似乎中心消失，它再次粘在左侧.....请帮助...我希望div总是集中精力！

js fiddle：jsfiddle.net/VCk2x/

Answer 1

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

以#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;中添加#mainDiv也设置为显示为块。

当调整窗口尺寸时，身体/ maindiv的居中消失

3 个答案: