PhotoSwipe How to center vertically thumbnails? Thank

Question

I have a problem, I don't understand why I can't get thumbnails center vertically on the list?

I tried:

.my-gallery figure {
    display: block;
    float: left;
    margin: 0 5px 20px;
    vertical-align: middle;
    width: 140px;}

and:

.my-gallery img {
    height: auto;
    vertical-align: middle;
    width: 100%;}

...but the thumbnails are always aligned to top. My thumbnails do not have the same size and it is not very pretty.

your images shouldn't be any bigger than 1200x1200 or else they look fuuny — Rachel Gallen, Jul 28 '15 at 16:47
here is a fiddle https://jsfiddle.net/g5y66dab/2/ (demo gallery of photoswipe) — Rachel Gallen, Jul 28 '15 at 16:57

score 2 · Answer 1 · answered Mar 14 '16 at 04:53

Basically, create another div around the div that contains the gallery photos:

<div id="container"> <div id="gallery"> <img></img> </div> </div>

Configure CSS:

#gallery { display:inline-block; }

#container { text-align: center; }

1 Answers1