Center Thumbnails in Gallery

DreamStreetPortraits

Hello,

I have used some CSS tricks somebody posted here to move thumbnails below the main photo in the SmugMug layout.

For some reason, however, the thumbnails are not centered. I have tried a few things to fix it, with no success.

Does anybody have any idea why it aligns to the left?

Here is a link to the gallery: https://www.dreamstreetportraits.com/Example

Here is the code:
/* ================================================
= 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: 50px !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;
}

.sm-nochrome>.sm-form-field-select {
display: none;
}
.sm-form-field-select-arrow.sm-icon {
display: none;
}

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

Hikin' Mike

I don't think that code will center it by itself. You just need to add this:

/* Centers Thumbnails */
.sm-user-ui .sm-gallery-smugmug .sm-gallery-tiles {text-align: center;}

DreamStreetPortraits

Absolutely beautiful. You are a wizard!
Thank you again