以DIV數組爲中心

我試圖以固定大小居中一堆div。我希望它能夠處理相對/未指定的窗口大小。下面的代碼工作，只要div不包裝到下一行。一旦它們包裝完畢，所有東西都會左對齊。該計劃是動態生成大量這些，並只能垂直滾動。我的CSS技能相當薄弱。有什麼建議？提前致謝。以DIV數組爲中心

.container { 
 
    margin: 0 auto; 
 
    display: table; 
 
} 
 
.block { 
 
    background: #999; 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
\t <div class="block">1</div> 
 
\t <div class="block">2</div> 
 
\t <div class="block">3</div> 
 
\t <div class="block">4</div> 
 
    <!-- 
 
\t <div class="block">5</div> 
 
\t <div class="block">6</div> 
 
\t <div class="block">7</div> 
 
\t <div class="block">8</div> 
 
\t <div class="block">9</div> 
 
\t <div class="block">10</div> 
 
\t <div class="block">11</div> 
 
\t <div class="block">12</div> 
 
\t <div class="block">13</div> 
 
\t <div class="block">14</div> 
 
\t <div class="block">15</div> 
 
    --> 
 
</div> 
 

 
</body> 
 
</html>

來源

2015-11-29 mbarnes4096

可以使用display:inline-block;代替float:left，然後給text-align:center;自己的父母不要忘記remove extra spaces這是由display:inline-block;

.container { 
 
    margin: 0 auto; 
 
    display: table; 
 
    text-align:center; 
 
} 
 
.block { 
 
    background: #999; 
 
    /* float: left; */ 
 
    display:inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
\t <div class="block">1</div> 
 
\t <div class="block">2</div> 
 
\t <div class="block">3</div> 
 
\t <div class="block">4</div> 
 
\t <div class="block">5</div> 
 
\t <div class="block">6</div> 
 
\t <div class="block">7</div> 
 
\t <div class="block">8</div> 
 
\t <div class="block">9</div> 
 
\t <div class="block">10</div> 
 
\t <div class="block">11</div> 
 
\t <div class="block">12</div> 
 
\t <div class="block">13</div> 
 
\t <div class="block">14</div> 
 
\t <div class="block">15</div> 
 
</div> 
 

 
</body> 
 
</html>

發生

來源

2015-11-29 04:14:24 Alex

以DIV數組爲中心

回答

相關問題