Boostrap Portfolio Elemente nicht zentriert

Question

Hej!

Ich arbeite an einer Boostrap-Bildergalerie, die in der Lage sein sollte, die Bildelemente zu mischen: http://demo.acasaprogramming.ro/shuffle-portfolio/#.

Im Moment versuche ich nur, die Galerie funktionieren zu lassen, ohne die Shuffle-Funktionalität, aber ich bin auf ein Problem gestoßen, das viel Zeit damit verbracht hat, zu lösen.

Die Artikel in meiner Galerie sind irgendwie zur Seite geschoben, und ich habe eine Menge Dinge ausprobiert, einschließlich: text-align: center. Festlegen der Polsterung auf allen Seiten gleich, Rand rechts: Automatisch; margin-left: auto; .... Ich weiß nicht, was ich falsch mache ..

Ich habe eine picture or my screen angefügt und wie auf dem Bild zu sehen, gehen die Bilder auf der linken Seite den ganzen Weg zu die Grenze - ich möchte, dass alle Elemente in der Mitte des Behälters:/

ich einen kleinen Teil meiner hTML-Dokument hinzugefügt - hoffen, dass genug ist (es ist der gleiche Code für alle Bilder)

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

Bootstrap-Elemente (Col-xs-4 zum Beispiel) haben Float Eigenschaft, die standardmäßig auf links festgelegt ist.

Sie haben Schwimmer zu setzen: keine und display: inline-block auf diese Elemente.

Auch text-align Zentrum für Eltern:

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

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

Arbeitsbeispiel: https://jsfiddle.net/cr29y1tc/24/

Answer 2

enter image description here

Entschuldigung. Hier ist das Bild des Bildschirms

Answer 3

Ihr Problem ist mit der mittleren Spalte und der 3D-Übersetzung.

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

Sie hatten ein extra 30 Pixel Top und 60 Pixel Top auf zwei Ihrer Spalten. Dies ist nur der Anfang auf der Site Link, den Sie angegeben haben.