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代码。