如何將方格中的內容居中並使用bootstrap.css保存寬高比？

Question

我想根據屏幕大小顯示方框。問題是我不能將內容放在方格中，並且沒有良好的寬高比。內容框的大小是固定的。

目標：

• 情況LG =>顯示器6周的div /行（6列）=> COL-LG-2;
• case md =>顯示5個div /行（5列）=> col-md-5（自定義類女巫適用20％）;
• case sm => display 3 divs/row（3 columns）=> col-sm-4;
• case xs => display 2 divs/row（2 columns）=> col-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

既然你知道你的。內容div的高度和寬度，您可以使用計算（）函數將在中鋒位置。

.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/