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?
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, 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: Question.zip (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 , but the image is no longer Right-aligned . 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 . 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.
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.
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!
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.
, but the image is no longer Right-aligned 
. 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 
