Trouble centering Bootstrap image gallery

Question

I'm using Bootstrap image gallery found here and I'm having difficulty centering the thumbnails on the page.

They center fine until I add max-width to the style to limit the amount of thumbnails on one row.

The webpage is here and here is my code:

<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%;
}

score 5 · Accepted Answer · answered Jul 20 '15 at 15:18

5

Add margin property:

.div-gallery {
    margin: auto;
}

This along with fixed width you set earlier will center your gallery.

answered Jul 20 '15 at 15:18

Keammoort

3,075
15
20

score 1 · Answer 2 · answered Jul 20 '15 at 15:20

1

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

answered Jul 20 '15 at 15:20

artdias90

735
1
10
18

Thank you, my understanding is growing. Am I right in thinking that margin: * * * * equates to margin: -top -right -bottom -left or something similar? – Alex Jul 20 '15 at 15:35
1

Yes, @Alex, but there are also other versions with 3 and 2 arguments - see here http://www.w3schools.com/cssref/pr_margin.asp – Keammoort Jul 20 '15 at 15:43

Trouble centering Bootstrap image gallery

2 Answers2