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.

摆脱float

.box

将.outer-box包裹在.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>

相应地更改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 = [
		{name: 'Name 1'},
		{name: 'Name 2'},
		{name: 'Name 3'},
		{name: 'Name 4'}
	];
});

.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无法计算一行中总div的数量，只能看到:first-child nth-child和{ {1}}。

这意味着css不知道底行中有多少div，因此您无法为其创建css代码。

CSS平铺，嵌套div多行居中对齐问题

4 个答案: