Wie zentriert man Inhalt in quadratische divs und behält das Seitenverhältnis mit bootstrap.css?

Question

Ich möchte quadratische Felder abhängig von der Bildschirmgröße anzeigen. Das Problem ist, dass ich den Inhalt in meinen quadratischen Divs nicht zentrieren kann und kein gutes Seitenverhältnis habe. Die Größe der Inhaltsbox ist festgelegt.

Ziel:

• Fall lg => Anzeige 6 divs/Reihen (6 Spalten) => col-lg-2;
• Fall md => Anzeige 5 Divs/Zeile (5 Spalten) => Col-MD-5 (benutzerdefinierte Klasse, die 20% gilt);
• Fall sm => Anzeige 3 divs/Zeile (3 Spalten) => col-sm-4;
• Fall xs => Anzeige 2 Divs/Zeile (2 Spalten) => 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

Da Sie die Höhe und Breite Ihres .content div wissen, könnten Sie die Calc() Funktion verwenden Sie es in der Mitte zu positionieren.

.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; 
} 

Fiddle: https://jsfiddle.net/4cun1aex/