如何在減少瀏覽器窗口時對齊Bootstrap圖像（響應）

Question

這是我的代碼示例。在瀏覽器的full-width一切看起來不錯。但是當我調整它的大小時，圖像（卡片）更靠近左側（不居中）。 我該如何解決這個問題？

HTML代碼：

<div class="container-fluid">   
     <div class="row "> 
      <div class="col-md-2"> 
       <figure class="imghvr-fold-up"> 
        <figcaption class="text-center"> 
         Hello       
        </figcaption>       
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
       </figure>    
      </div> 
      <div class="col-md-2"> 
       <figure class="imghvr-fold-up"> 
        <figcaption class="text-center"> 
         Hello       
        </figcaption>       
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
       </figure>  
      </div> 
      <div class="col-md-2"> 
       <figure class="imghvr-fold-up"> 
        <figcaption class="text-center"> 
         Hello       
        </figcaption>       
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
       </figure>  
      </div> 
      <div class="col-md-2"> 
       <figure class="imghvr-fold-up"> 
        <figcaption class="text-center"> 
         Hello       
        </figcaption>       
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
       </figure>  
      </div> 
      <div class="col-md-2"> 
       <figure class="imghvr-fold-up"> 
        <figcaption class="text-center"> 
         Hello       
        </figcaption>       
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
       </figure>  
      </div> 
      <div class="col-md-2"> 
       <figure class="imghvr-fold-up"> 
        <figcaption class="text-center"> 
         Hello       
        </figcaption>       
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
       </figure>  
      </div> 
     </div> 
    </div> 

由於我使用Bootstrap v4，它會自動根據頁面調整。但這裏是我的經驗...

See the image

Answer 1

應用display: inline-block;到img標籤然後應用text-align: center;父;

在您的代碼中，您已將display: block;應用於圖片標記。現在，圖像充當被阻擋的元素。這就是爲什麼你的圖像沒有在中心對齊。

我申請text-align: center;爲imghvr-fold-up，因爲我可以在一個點上處理標題和圖像。

輸出：

//CSS 
 
.img-thumbnail { 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row "> 
 
     <div class="col-md-2 text-center"> 
 
      <figure class="imghvr-fold-up"> 
 
       <figcaption class=""> 
 
        Hello 
 
       </figcaption> 
 
       <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
      </figure> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <figure class="imghvr-fold-up text-center"> 
 
       <figcaption class=""> 
 
        Hello 
 
       </figcaption> 
 
       <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
      </figure> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <figure class="imghvr-fold-up text-center"> 
 
       <figcaption> 
 
        Hello 
 
       </figcaption> 
 
       <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
      </figure> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <figure class="imghvr-fold-up text-center"> 
 
       <figcaption> 
 
        Hello 
 
       </figcaption> 
 
       <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
      </figure> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <figure class="imghvr-fold-up text-center"> 
 
       <figcaption> 
 
        Hello 
 
       </figcaption> 
 
       <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
      </figure> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <figure class="imghvr-fold-up text-center"> 
 
       <figcaption> 
 
        Hello 
 
       </figcaption> 
 
       <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
      </figure> 
 
     </div> 
 
    </div> 
 
</div>

演示在codepen.

Answer 2

您可以嘗試使用時，在圖像上的間隔類的小屏幕mx-sm-auto，以獲得更多信息關於這些在這裏看到：https://v4-alpha.getbootstrap.com/utilities/spacing/

Answer 3

添加margin:auto和display: block到圖像使其居中

Fiddle

.img-thumbnail{margin:auto;display:block}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid">   
 
     <div class="row "> 
 
      <div class="col-md-2"> 
 
       <figure class="imghvr-fold-up"> 
 
        <figcaption class="text-center"> 
 
         Hello       
 
        </figcaption>       
 
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
       </figure>    
 
      </div> 
 
      <div class="col-md-2"> 
 
       <figure class="imghvr-fold-up"> 
 
        <figcaption class="text-center"> 
 
         Hello       
 
        </figcaption>       
 
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
       </figure>  
 
      </div> 
 
      <div class="col-md-2"> 
 
       <figure class="imghvr-fold-up"> 
 
        <figcaption class="text-center"> 
 
         Hello       
 
        </figcaption>       
 
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
       </figure>  
 
      </div> 
 
      <div class="col-md-2"> 
 
       <figure class="imghvr-fold-up"> 
 
        <figcaption class="text-center"> 
 
         Hello       
 
        </figcaption>       
 
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
       </figure>  
 
      </div> 
 
      <div class="col-md-2"> 
 
       <figure class="imghvr-fold-up"> 
 
        <figcaption class="text-center"> 
 
         Hello       
 
        </figcaption>       
 
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
       </figure>  
 
      </div> 
 
      <div class="col-md-2"> 
 
       <figure class="imghvr-fold-up"> 
 
        <figcaption class="text-center"> 
 
         Hello       
 
        </figcaption>       
 
        <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre"> 
 
       </figure>  
 
      </div> 
 
     </div> 
 
    </div>