Lightbox: location of the circle with a + in it [SOLVED]

Here’s a sample page in my website where I use Lightbox on every image.

The reason I use Lightbox is so when people click the images, they get an enlargement. The problem is that when you mouseover, the circle with the little “+” inside is not located perfectly center to the image. It seems to be centering based on the Column that contains the image, which I find very odd because Lightbox is placed directly on the images, not on the Column that contains the images! As a result, that circle is not centered on the image in LG, MD, or SM breakpoints, but it is perfectly centered on the images in XS.

How do I make the circle be perfectly centered inside its associated image in all breakpoints?


Hey @JDW

Remove the class you have added on the image called .float-sm-right

Float is causing the issue.

I think its because the a[data-lightbox] has a display: block style applied.

Have you tried wrapping the image in a DIV and positioning the DIV instead.

Thank you for your kind help.

I did not add the class named .float-sm-right. But I do see it now in the code…

<img src="img/NS-4_1x.jpg" class="img-fluid install-parts-pics float-none float-sm-right" alt="製品写真" srcset="img/NS-4_2x.jpg 2x"/>

The only class I added to each IMG is called install-parts-pics, which you see in the above code. And within that class, Display = Default, and Float = None. The only thing my class does is add Margin & Padding to the image.

So if the lightbox has a “block style applied” then it is Blocs doing, not mine. I did change the “Alignment” of each image, via the right sidebar, to be Right-aligned.


I created a DIV and then put one of the images inside that DIV and made that image be Left-Aligned. On Preview I see the circle & + are now perfectly centered within the image, which is what I want, but the bad part is that the image is no longer Right-aligned. If I make the image Right-Aligned (within that DIV), then the circle & + are no longer centered within the image anymore. Hmmm…

Doing that removes the idea of putting it in a Div. I’m not on my Mac, but use the div to contain the size of the image and the image is set to 100% width. Then position the Div.

Probably changing the structure (not the design) would help.

Yes it’s part of it, I never said you did.

James, this is the answer.
You can right-align the DIV.

Yes, I know I can Right-align the DIV, but that is NOT a solution in my testing. You can confirm that via this single page example Blocs document: (1.9 MB) .

Specifically, when I create a DIV and then place one of my images within that DIV and then change the Alignment of that Image to be Left-Aligned, when I preview, the circle & + displays correctly and perfectly centered within the image :+1:, but the image is no longer Right-aligned :-1:. If I then select the container DIV and make that DIV to be Right-aligned as per Appearance > Alignment of the right sidebar, when I Preview in LG, the Image is in fact Center-aligned :-1:. That is why making the DIV to be Right-aligned is not a solution here. Again, you can confirm this using the example Blocs document linked above.

Furthermore, even if I create a new class on the Image that sets Text Align to Right and also sets Float to Right (whether it’s set to Inline Block or not), the Image still displays Center-Aligned on Preview.

Image looks properly Right-Aligned on the Canvas:

But when you Preview, it’s Center-aligned:

And no, deleting the “install-parts-pics” Class on the Image doesn’t solve the problem either.

As a result, I would appreciate hearing your thoughts and advice on how to Right-align that image while keeping the circle & + properly centered within the image.

Thank you.

Here you go @JDW

This solves it based on your sample project.

Sorry I mention the left panel in the video, but I meant right :rofl: :rofl: Long day :wink:


I truly wonderful solution, Pete. I greatly appreciate your time in holding my hand step-by-step through that process. After a few additional tweaks across the smaller breakpoint, it’s now working perfectly! THANK YOU!


Well reading above you were close.

You can set the image to have a 100% width and an auto height, if you intend to have images of slightly different sizes (ie. longer images), this will keep the (+) in the center also.