當調整窗口的大小時，body/maindiv的居中消失更小

Question

你好，我有一個小的css問題......只是無法弄清楚，而且我已經用google搜索了，所以;我有一個主要的div，其中有divs，我的想法是，當它打開一個小屏幕時，div應該出現在對方下面，而且它確實......我的問題是，在電腦屏幕上它居中顯示在窗口中，但一旦我調整窗口的大小，所以第一個div跳到下一行，似乎中心消失了，它再次卡在左邊.....請幫助...我希望div始終集中！

爵士小提琴：jsfiddle.net/VCk2x/

Answer 1

這裏，似乎做你想做的一個例子：

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 2

如果你想完成一個負責任的佈局這樣，你就錯了。
我建議讀一些基本的responsive tutorials。

要居中您#mainDiv，但是：

#mainDiv { 
    margin:0 auto; 
} 

Answer 3

我不理解你的問題，但我認爲你的塊不應該作爲內聯一起顯示，如果這是正確的。添加width: {your width}px;的#mainDiv也設置爲顯示爲塊。