Неполадки с центрированием Галерея изображений Bootstrap

Question

Я использую галерею изображений Bootstrap here, и у меня возникают трудности с центрированием эскизов на странице.

Они центрируются до тех пор, пока я не добавлю максимальную ширину к стилю, чтобы ограничить количество миниатюр в одной строке.

Веб-страница является here и вот мой код:

<div id="links" class="text-center div-gallery"> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj1.jpg" title="1" data-gallery> <!-- Image --> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj1t.jpg" class="img-gal-box" alt="1"> <!-- Thumbnail --> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj2.jpg" title="2" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj2t.jpg" class="img-gal-box" alt="2"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj3.jpg" title="3" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj3t.jpg" class="img-gal-box" alt="3"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj4.jpg" title="4" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj4t.jpg" class="img-gal-box" alt="4"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj5.jpg" title="5" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj5t.jpg" class="img-gal-box" alt="5"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj6.jpg" title="6" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj6t.jpg" class="img-gal-box" alt="6"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj7.jpg" title="7" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj7t.jpg" class="img-gal-box" alt="7"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj8.jpg" title="8" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj8t.jpg" class="img-gal-box" alt="8"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj9.jpg" title="9" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj9t.jpg" class="img-gal-box" alt="9"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj10.jpgg" title="10" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj10t.jpg" class="img-gal-box" alt="10"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj11.jpg" title="11" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj11t.jpg" class="img-gal-box" alt="11"> 
    </a> 
    <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj12.jpg" title="12" data-gallery> 
    <img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj12t.jpg" class="img-gal-box" alt="12"> 
    </a> 
</div> 

-CSS

.div-gallery { 
    max-width: 767px; 
} 
.img-gal-box { 
    padding: 1%; 
} 

Answer 1

Добавить маржу недвижимость:

.div-gallery { 
    margin: auto; 
} 

Это наряду с фиксированной шириной вы установили ранее будет центр вашей галереи.

Answer 2

div-gallery { 
    padding: 1%; 
    max-width: 767px; 
    margin: -2% auto 0 auto; 
}