如何在方维数中对内容进行中心化，并用bootstrap.css来保持高宽比？

Question

我想根据屏幕大小显示方框。问题是，我不能把内容集中在我的方框中，而且没有很好的高宽比。内容框的大小是固定的。

目标：

• case lg =>显示6 div/行(6列) => =>-lg-2；
• case md =>显示5 div/行(5列) => col-md-5 (自定义类应用20% )；
• case sm =>显示3 div/行(3列) => =>-sm-4；
• case xs =>显示2 div/行(2列) => =>-sm-6；

​

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

    app.controller('MainCtrl',['$scope', function($scope){
    $scope.test = 'Angular works !!';
    $scope.data = [];
    for(var i=0;i<50;i++){
    $scope.data.push('item ' + i);
    }
    }]);

    .square { 
        border: 5px solid red;
        position: relative;
        text-align: center;
        /*width: 50%;*/
      }

    .square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
      }

      .content {
        position: absolute;
        width: 200px;
        height: 200px;
        border:solid blue 1px;
        font-size: 2em;
        top:0%;
        left:0%;
        padding-top: 0%;
      }
    .col-xs-15 {
        width: 20%;
        float: left;
    }
    @media screen and (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
    }
    @media screen and (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
    }
    @media screen and (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
    }

  <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <div class="container-fluid" ng-app="myApp" ng-controller="MainCtrl">
      <div ng-repeat="items in data" class="square col-lg-2 col-md-15 col-sm-4 col-xs-6">
        <div class="content">
          Hello!
        </div>
      </div>
    </div>

​

Answer 1

由于您知道.content div的高度和宽度，所以可以使用calc()函数将其定位在中心。

.square { 
    border: 5px solid red;
    text-align: center;
}

.content {
    width: 200px;
    height: 200px;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: calc(50% - 100px);
    border:solid blue 1px;
    font-size: 2em;
}

小提琴：https://jsfiddle.net/4cun1aex/