Zentrieren eines Artikels in Bootstrap-Spalte

Question

Ich habe einen Container mit drei col-md-4 innen. Jede Spalte hat ein Kartenlayout. Alles zeigt sich gut. Wenn das Fenster jedoch unter 992px skaliert wird und die Spalten gestapelt werden, schweben sie nach links. Zuerst verwendete ich:

<div align="center"> 

aber es ist nicht so HTML5. Jede andere Lösung hat nicht geholfen.

Hier ist alles, was ich jetzt habe:

<div class="categories"> 
    <div class="container"> 
    <div class="row"> 
     <!-- 1st card --> 
     <div class="col-md-4"> 
     <div class="card"> 
      <div class="cardoverlay"> 
      <div class="line"> 
       <hr> 
       <i class="fa lifering"></i> 
       <hr> 
      </div> 
      </div> 
     </div> 
     </div> 
     <!-- 2nd card --> 
     <div class="col-md-4"> 
     <div class="card"> 
      <div class="cardoverlay"> 
      <div class="line"> 
       <hr> 
       <i class="fa cogs"></i> 
       <hr> 
      </div> 
      </div> 
     </div> 
     </div> 
     <!-- 3rd card --> 
     <div class="col-md-4"> 
     <div class="card"> 
      <div class="cardoverlay"> 
      <div class="line"> 
       <hr> 
       <i class="fa cubes"></i> 
       <hr> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div>` 

     .categories { 
     background-color: #e1e1e1; 
     height: auto; 
     text-align: center; 
    } 

    .card { 
     max-width: 353px; 
     height: 662px; 
     -webkit-border-radius: 5px/7px; 
     -moz-border-radius: 5px/7px; 
     border-radius: 8px/10px; 
     background-color: #fff; 
     -webkit-box-shadow: 0 2px #b8b3b3; 
     -moz-box-shadow: 0 2px #b8b3b3; 
     box-shadow: 3px #b8b3b3; 
     margin-top: 50px; 
     margin-bottom: 50px; 
    } 

    .line { 
     display: flex; 
     width: 100%; 
     align-items: center; 
     justify-content: center; 
    } 

    hr { 
     border: 0; 
     border-top: 1px solid #c2c6c7; 
     flex: 1; 
     z-index: 1; 
    } 

    .lifering:after { 
     font-size: 90px; 
     color: #d67676; 
     padding: 20px; 
     content: '\f1cd'; 
     display: inline-block; 
     text-shadow: 0.7px -1px 0.7px #450c04; 
    } 

    .cogs:after { 
     font-size: 90px; 
     color: #329fdd; 
     padding: 20px; 
     content: '\f085'; 
     display: inline-block; 
     text-shadow: 0.7px -1px 0.7px #000000; 
    } 

    .cubes:after { 
     font-size: 90px; 
     color: #36d7b7; 
     padding: 20px; 
     content: '\f1b3'; 
     display: inline-block; 
     text-shadow: 0.7px -1px 0.7px #000000; 
    } 


    .cardoverlay { 
     max-width: 353px; 
     height: 202px; 
     -webkit-border-radius: 5px 5px 0 0/10px 10px 0 0; 
     -moz-border-radius: 5px 5px 0 0/10px 10px 0 0; 
     border-radius: 5px 5px 0 0/10px 10px 0 0 #f1f1f1; 
     background-color: #f9f9f9; 
     -webkit-box-shadow: 0 3px #f1f1f1; 
     -moz-box-shadow: 0 3px #f1f1f1; 
     box-shadow: 0 3px #f1f1f1; 
    } 

Fiddle

Answer 1

Wenn Sie Rand hinzu: 50px auto; bis .card in Ihrem CSS zentriert es die Karten. 50px bleibt der Rand auf der Oberseite und der Unterseite der Karte und Auto arbeitet, um Mitte auszurichten. Neue Kartenstile würden wie folgt aussehen:

.card { 
    max-width: 353px; 
    height: 662px; 
    -webkit-border-radius: 5px/7px; 
    -moz-border-radius: 5px/7px; 
    border-radius: 8px/10px; 
    background-color: #fff; 
    -webkit-box-shadow: 0 2px #b8b3b3; 
    -moz-box-shadow: 0 2px #b8b3b3; 
    box-shadow: 3px #b8b3b3; 
    margin:50px auto; 
}