CSS平鋪嵌套div多行居中對齊問題

Question

在查看了幾個現有問題並嘗試了無數次組合後，我無法找到解決此特定居中問題的解決方案。

我有一個外部div，其中包含可變數量的div（使用AngularJS）。我有一些行，但在下一行，如果它包含比整行少的div，我需要這些div居中。 （擴展下面的例子中，如果有在第二行兩盒，這兩個盒一起應在三個框的上方居中）

該圖像示出了該問題：

我當前的代碼是在這裏：JSFiddle

的CSS：

.outerbox { 
 
    background-color: lightblue; 
 
    margin: 10px auto; 
 
    width: 350px; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.box { 
 
    background-color: lightgreen; 
 
    border-style: solid; 
 
    border-color: black; 
 
    border-width: 1px; 
 
    margin: 2px; 
 
    height: 100px; 
 
    width: 100px; 
 
    display: inline-block; 
 
    float: left; 
 
}

...以及相關的HTML：

<div ng-if="show" class="outerbox" ng-repeat="box in boxes"> 
     <div class="box">{{box.name}}</div> 
    </div> 

Answer 1

這裏是一個工作fiddle.

1. 在.box

2. 裹.outer-box擺脫float的.outerbox-container內：

   <div class="outerbox-container"> 
       <div ng-if="show" class="outerbox" ng-repeat="box in boxes"> 
        <div class="box">{{box.name}}</div> 
       </div> 
   </div> 
   

3. 更改相應的CSS：

   .outer-box { 
       display: inline-block; 
       width: 100px; //instead of 350px 
   } 
   
   .outerbox-container { 
       width: 350px; 
       text-align: center; 
   } 
   

Answer 2

嘗試這種方式。

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('myCtrl', function($scope) { 
 
    $scope.boxes = [ 
 
\t \t {name: 'Name 1'}, 
 
\t \t {name: 'Name 2'}, 
 
\t \t {name: 'Name 3'}, 
 
\t \t {name: 'Name 4'} 
 
\t ]; 
 
});

.outerbox { 
 
    background-color: lightblue; 
 
    margin: 10px auto; 
 
    width: 350px; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.box { 
 
    background-color: lightgreen; 
 
    border-style: solid; 
 
    border-color: black; 
 
    border-width: 1px; 
 
    margin: 2px; 
 
    height: 100px; 
 
    width: 100px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.boxClass{ 
 
    margin-left: 108px; 
 
    
 
    } 
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller='myCtrl' ng-init="show=false"> 
 
    <button ng-model="show" ng-click="show=!show" ng-bind="show?'Animate Leave':'Animate Enter'"> 
 
    </button> 
 

 
    <div ng-if="show" class="outerbox" ng-repeat="box in boxes"> 
 
     <div class="box" ng-class="{'boxClass': $last}" >{{box.name}}</div> 
 
    </div> 
 

 
</div>

Answer 3

擺脫浮動！

.outerbox { 
 
    background-color: lightblue; 
 
    margin: 10px auto; 
 
    width: 350px; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.box { 
 
    background-color: lightgreen; 
 
    border-style: solid; 
 
    border-color: black; 
 
    border-width: 1px; 
 
    margin: 2px; 
 
    height: 100px; 
 
    width: 100px; 
 
    display: inline-block; 
 
}

<div ng-if="show" class="outerbox" ng-repeat="box in boxes"> 
 
    <div class="box">{{box.name}}</div> 
 
    <div class="box">{{box.name}}</div> 
 
    <div class="box">{{box.name}}</div> 
 
    <div class="box">{{box.name}}</div> 
 
</div>

Answer 4

您需要JavaScript來做到這一點，因爲據我所知，CSS不能連續計算總申報單的數量，它只能看到:first-childnth-child和last child 。

這意味着CSS不知道底部行有多少個div，所以你將無法爲其製作CSS代碼。