ブートストラップカラムの中にアイテムを集中させる

Question

私は内側に3つのcol-md-4を持つコンテナを持っています。各列にはカードレイアウトがあります。すべてがうまく表示されています。ただし、ウィンドウのサイズを992ピクセル以下に変更して列が積み重なると、それらは左に浮かびます。最初に私は使用した：

<div align="center"> 

しかしそれほどHTML5ではない。それ以外の解決策は役に立たなかった。ここで

は私が今持ってすべてです：

<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

あなたはマージン追加する場合：は50px自動;〜.cardあなたのCSSでは、カードの中心を合わせます。 50pxはカードの上下にマージンを残し、オートはセンターアライメントを行います。新しいカードスタイルは次のようになります：

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