center: 0; not working for slideshows

Site URL: https://scottdimond.squarespace.com/

Hello,

Can someone tell me why
center: 0;
is not working in the code below with a .gallery-reel. It acts as if I had
left: 0;
coded. In fact, if I code
right: 0;
that works.

I just cannot get center to work. 

Thanks

btw, I just noticed that center: 0; is also not working for .gallery-fullscreen-slideshow.

pw: letmein

/* Watermark in fullscreen slideshow real - gigapixel */
.gallery-reel-item-wrapper{
    position: relative!important}

.gallery-reel-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/61a2a7b00b6008246ee8fe57/t/61a3af940246c70937ff9e59/1638117268613/500px+DIMOND+white_logo_transparent.png)!important;
    background-size: contain;
    position: absolute;
    width: 100px;
    height: 40px;
    center: 0;
    bottom: 0;
    opacity: .5
}

There is no center property in CSS.

Could you describe the effect you are trying to achieve? Perhaps we can provide a solution.

@creedon thanks for the reply. 

Interesting. I had coded this: 

/* Watermark in Lightbox */
.gallery-lightbox-item-wrapper{
    position: relative!important}

.gallery-lightbox-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/61a2a7b00b6008246ee8fe57/t/61a3af940246c70937ff9e59/1638117268613/500px+DIMOND+white_logo_transparent.png)!important;
    background-size: contain;
    position: absolute;
    width: 100px;
    height: 40px;
    center: 0;
    bottom: 0;
    opacity: .2
}

and it did result in what I wanted, which was this watermark at the bottom and right in the middle: 

so that is why I just thought center: 0; was working. If there is no support for center in CSS, I'm not sure why it is doing what I want in the above case. But anyway, that is exactly want I want because on slideshows the images can be cut off and neither the far left nor far right of the image may appear, so having a watermark out (hard left or right) there does not really help - as shown with the first image on this page: https://scottdimond.squarespace.com/gigapixel

 Thanks for your help, Scott

I could be wrong on the center property. But a search for it on Bing, Google, and Can I Use didn't seem to produce any results of interest.

Please give us your site-wide password so we can take a look at your site.

@creedon It was in the original post but maybe not so obvious 🙂

>pw: letmein

1 hour ago, ScottDimond said:

It was in the original post but maybe not so obvious

My bad I missed it! 🙂

I'm in but I'm not seeing the image you showed above.

@creedon

The images where the watermark appears in the center are any in these galleries but only in the lightbox, so you need to click on the image to see it: 

https://scottdimond.squarespace.com/galleries

The image in particular is in this gallery and you will see the watermark nicely positioned in the bottom middle: 

https://scottdimond.squarespace.com/galleries/illuminated-abandonment?itemId=6o8ovlxrfy4iiy0a4tc03nxrko4y7u

The center property is not having an effect. Chrome Inspector shows it not being valid.

Here is the code that is centering the watermark horizontally. This is not the full effect but shows the bits that are actually causing the centering. Well that and things the browser does by default.

.gallery-lightbox-item-wrapper::after {

  background-image : url( https://static1.squarespace.com/static/61a2a7b00b6008246ee8fe57/t/61a3af940246c70937ff9e59/1638117268613/500px+DIMOND+white_logo_transparent.png );
  content : '';
  height : 40px;
  position : absolute;
  width : 100px;
  
  }

Notice the blue block. That is where the image is, albeit not showing as this is not the full code.

And with the rest of the code for the effect it looks like you would expect.

.gallery-lightbox-item-wrapper::after {

  background-image : url( https://static1.squarespace.com/static/61a2a7b00b6008246ee8fe57/t/61a3af940246c70937ff9e59/1638117268613/500px+DIMOND+white_logo_transparent.png );
  background-size : contain;
  bottom : 0;
  content : '';
  height : 40px;
  opacity : 0.2;
  position : absolute;
  width : 100px;
  
  }