Boostrapポートフォリオ品目が中央にない

Question

Hej！

私は画像アイテムをシャッフルすることができるブーストラップイメージギャラリーで作業しています：http://demo.acasaprogramming.ro/shuffle-portfolio/#。

今はシャッフル機能なしでギャラリーの仕事をしようとしていますが、解決しようと多くの時間を費やした問題にぶつかりました。

私のギャラリーのアイテムはちょっとサイドにプッシュされています。私はtext-align：centerなどの多くのことを試しました。すべての側で同じようにパディングを設定する、margin-right：auto;余白左：自動; ....私は間違って何をしているのかわからない。

私はpicture or my screenを添付していて、写真の目に見えるように、左側の画像は国境 - 私は、コンテナの中央にあるすべての項目たい：/

私は、HTML文書の小さなセクションを追加する - それが十分であると思います（それはすべての画像に同じコードである）

body 
 
    { 
 
    background-color: #f1f5f8; 
 
    border-top: 10px solid #2980b9; 
 
    } 
 
    
 
    .portfolio 
 
    { 
 
    margin: 48px 0; 
 
    } 
 
    
 
    .portfolio-sorting 
 
    { 
 
    text-transform: uppercase; 
 
    font-size: 16px; 
 
    margin-bottom: 48px; 
 

 

 
    } 
 

 
    
 
    .portfolio-sorting li a 
 
    { 
 
    color: #000000; 
 
    text-decoration: none; 
 
    padding: 6px; 
 
    } 
 

 
    .portfolio-sorting li a:hover, 
 
    .portfolio-sorting li a.active 
 
    { 
 
    color: #2980b9; 
 
    border-bottom: 2px solid #2980b9; 
 
    }

<section class="portfolio"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
    
 
      <ul class="portfolio-sorting list-inline text-center"> 
 
      <li><a href="#" data-group="all" class="active">All</a></li> 
 
      <li><a href="#" data-group="people">People</a></li> 
 
      <li><a href="#" data-group="simpsons">Simpsons</a></li> 
 
      <li><a href="#" data-group="futurama">Futurama</a></li> 
 
      </ul> <!--end portfolio sorting --> 
 
    
 
    
 
    
 
      <ul class="portfolio-items list-unstyled" id="grid"> 
 
    
 
      <li class="col-md-4 col-sm-4 col-xs-6" data-groups='["people"]'> 
 
       <figure class="portfolio-item"> 
 
       <a href="#"> 
 
        <img src="http://lorempixel.com/700/400/people/1" alt="Item 1" 
 
        class="img-responsive"> 
 
       </a> 
 
       </figure> 
 
      </li> 
 
    
 
      <li class="col-md-4 col-sm-4 col-xs-6" data-groups='["people"]'> 
 
       <figure class="portfolio-item"> 
 
        <a href="#"> 
 
         <img src="http://lorempixel.com/700/400/people/7" alt="" 
 
         class="img-responsive"> 
 
        </a> 
 
       </figure> 
 
      </li> 
 
    </ul> <!--end portfolio grid --> 
 
    
 
    
 
      </div> <!--end row --> 
 
     </div> <!-- end container--> 
 
    </section> 
 

Answer 1

ブートストラップ要素（col-xs-4など）はfloatというプロパティをデフォルトでleftに設定しています。

float：なしおよびディスプレイ：インラインブロックをこれらの要素に設定する必要があります。親のための

また、テキスト整列センター：

.portfolio-items { 
    text-align: center; 
} 

.portfolio-items > li { 
    display: inline-block; 
    float: none; 
} 

の作業例：https://jsfiddle.net/cr29y1tc/24/

Answer 2

enter image description here

申し訳ありません。ここでは、画面の画像です

Answer 3

あなたの問題は、中央の列と3Dの翻訳です。

<ul class="portfolio-items center-block list-unstyled shuffle" id="grid" style="position: relative; overflow: hidden; height: 707.109px; transition: height 250ms ease-out;"> 

      <li class="col-md-4 col-sm-4 center-block col-xs-6 shuffle-item filtered" data-groups="[&quot;people&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; transition: transform 250ms ease-out, opacity 250ms ease-out; opacity: 1; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);"> 
       <figure class="portfolio-item"> 
       <a href="#"> 
        <img src="http://lorempixel.com/700/400/people/1" alt="Item 1" class="img-responsive"> 
       </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;people&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 0px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempixel.com/700/400/people/7" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;futurama&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(780px, 0px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/futurama/700/400/1" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;futurama&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 0px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/futurama/700/400/2" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;simpsons&quot;, &quot;people&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(0px, 236px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/simpsons/700/400/1" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;simpsons&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(780px, 236px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/simpsons/700/400/3" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-blockcol-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;people&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 266px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempixel.com/700/400/people/9" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;simpsons&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(390px, 236px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/simpsons/700/400/4" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 

      <li class="col-md-4 center-block col-sm-4 col-xs-6 shuffle-item filtered" data-groups="[&quot;futurama&quot;]" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(0px, 471px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"> 
       <figure class="portfolio-item"> 
        <a href="#"> 
         <img src="http://lorempicsum.com/futurama/700/400/5" alt="" class="img-responsive"> 
        </a> 
       </figure> 
      </li> 


      <!-- sizer --> 
      <li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer shuffle-item filtered" style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1; transform: translate3d(780px, 471px, 0px) scale3d(1, 1, 1); transition: transform 250ms ease-out, opacity 250ms ease-out;"></li> 


      </ul> 

2つの列に余分な30ピクセルの上部と60ピクセルの上部があります。これはあなたが提供したサイトリンクの始まりに過ぎません。