Center thumbnails

JDGS

Hi,

I would like to know how can I center the thumbnail bar of my galleries.
They look like this:

To customize the galleries I used the info on this website: https://aaronmphotography.com/Customizations/Gallery/FIlmstrip-Gallery-Style

And my CSS looks like this:

/* ================================================
= MOVE THUMBNAILS BELOW PHOTO IN SMUGMUG LAYOUT =
================================================ */
/* Move the thumbnails below the photo
This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
  -webkit-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

/* Make the photo fit the width of the page so it's larger */
.sm-gallery .sm-gallery-images .sm-gallery-image-container {
  width: 100% !important;
}

/* Make the thumbnails fit the width of the page
Also push it down 20 pixels so it's not so close to the captions.
ALTER THIS TO YOUR LIKING */
.sm-gallery .sm-gallery-images .sm-gallery-tiles-container {
  width: 90% !important;
  margin-top: 40px !important;
  margin-left: auto !important;
  margin-right: auto !Important;
}

/* Make it so the thumbnails don't have a specific height + align centrally
YOU'LL WANT TO ADJUST THIS SO YOU GET THE # OF ROWS OF THUMBS YOU WANT. 
THE BIGGER THE NUMBER THE MORE ROWS YOU GET. */
.sm-gallery-tilesnav {
  float: none !important;
  min-height: 100px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* shift tiles over to align centrally.
YOU WILL WANT TO CUSTOMIZE THE MAX WIDTH TO YOUR LIKING */
.sm-gallery-smugmug .sm-gallery-tiles {
  max-width: 85% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* align thumnails pagination centrally */
.sm-gallery-tiles-bar {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove captions */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info {
  display: none;
}

/* Remove share buttons
DELETE THIS SECTION IF YOU WANT TO INCLUDE THE SHARE BUTTON */
.sm-button-image-share {
  display: none;
}

/* Remove buy button
DELETE THIS SECTION IF YOU WANT TO INCLUDE THE BUY BUTTON */
.sm-gallery-header {
  /* display: none; */
}

/* Hide the pagination drop-down box (ex: 1 of 2) */
.sm-gallery-tiles-pagination {
  display: none;
}

/* Make sure comments display right below the thumbnails */
.sm-gallery-footer .sm-gallery-comments {
  padding-top: 0px !important;
}

So what could I change to center the thumbnail bar?
Thanks,
Daniel Santos

Hikin' Mike

Find this:

.sm-gallery-smugmug .sm-gallery-tiles {
  max-width: 85% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

Add text-align: center;.

JDGS

Thank you so much!
And how can I set the size of the photo being displayed at 800px?

Hikin' Mike

@JDGS said:
Thank you so much!
And how can I set the size of the photo being displayed at 800px?

.sm-tile-wrapper.sm-tile-photo {width: 800px !important;}

JDGS

Thanks Mike!