ブラウザウィンドウを縮小するときにブートストラップイメージを中央に配置する方法（応答）

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を使用しているので、それが自動的にページに応じて調整する必要があります。しかし、ここであなたがこれらの詳細は小さい画面mx-sm-auto、上ここで見ると、画像の上にスペーサークラスを使用して試すことができます...私が経験何

See the image

Answer 1

親にtext-align: center;を適用し、その後imgタグにdisplay: inline-block;を適用します。

コードでは、display: block;をイメージタグに適用しています。ここでイメージはブロックされた要素として機能します。そのため、あなたのイメージは中心に整列していません。

imghvr-fold-upにtext-align: center;を適用しました。キャプションと画像を1点で処理できるためです。

出力：

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

です：https://v4-alpha.getbootstrap.com/utilities/spacing/

Answer 3

はmargin:autoを追加し、それ

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>

0123を中央に画像