Theme Overrides Image Centering Class

Sorry, I should note that I use the Claro Admin theme. The image is properly centered when the view preview is shown using this theme.

Hello,

Thank you for bringing this to my attention.

I have updated the theme so that img, video, object, and embed elements now correctly inherit alignment from their wrapper, ensuring they center as expected when using .text-align-center.

Solution:
You can download the latest dev version, which includes this fix.
If you prefer to patch it manually, add the following CSS under Theme Settings > Global Site > CSS Injector:

#page-wrapper .text-align-center img,
#page-wrapper .text-align-center video,
#page-wrapper .text-align-center object,
#page-wrapper .text-align-center embed {
  margin-left: auto;
  margin-right: auto;
}

Best wishes,
Alaa

Thanks! As a test, I added the CSS Injector settings as you suggested. The image is still left-justified. If it helps, you can see my site here:

https://www.musclecarresearch.com/

The "Featured Product" views block is at the top of the content region. The off-center image can't be missed.

I figured out a way to center the image, but it's a hack. I added the following CSS to Theme Settings > Global Site > CSS Dynamic:

a.img--is-clickable > img.solo-image, a.img--is-clickable > picture > img.solo-image {
    width: 100%;
    float: none !important;
}

float: none !important; is what did the trick.

Hello,

Yes, it is correct. The image is nested inside a clickable anchor that was previously using float: left. Disabling the float will fix it.

#page-wrapper .text-align-center img,
#page-wrapper .text-align-center video,
#page-wrapper .text-align-center object,
#page-wrapper .text-align-center embed {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Best wishes,
Alaa

Confirmed. Adding float: none; to the CSS you provided works.