Click Image & Image Position is not Center

[ferrry1090]

Hi All, Thanks for coming and I need your help.
I am using the Image Module, but when I click the Image, the Image position is at the bottom left side.
Preview in this link

Anyone can help me on this one?
Thanks in advance!

[stygian-desolator]

Hi, Could you please provide a minimal reproduction?

[ferrry1090]

Thanks for replying and sorry for my late response.

I was trying to recreate the issue I'm facing in sandbox / stackblitz, but to no avail.
But during my investigation, looks like the image preview is not centered because I installed a tailwindcss on top of ng-zorro-antd.

When I checked css elements of the image preview, I found that there is a tagging coming from tailwindcss.

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

I tried to use ng-deep in this case, but seems like not working. I'm trying below but not working (in the component css)

::ng-deep .ant-image-preview-img {
  display: inline-block; //will make the image to center, tested okay when i change in console element
}

Is there other way for this?

[ZeroJsus]

Found the same issue with me.
Thanks for your guide code.
I solved this problem with this code
css img.ant-image-preview-img { display: inline-block; }

[nugrohobayu]

thanks for your guide code.
I fix the problem with it
css img.ant-image-preview-img { display: inline-block; }

[j3ramy]

For me, none of the above solutions worked.
After some time of research I figrued out to simply add

corePlugins: { preflight: false, },

to the tailwind.config.js and it worked for me!

[williamOnsare]

For me, none of the above solutions worked. After some time of research I figrued out to simply add

corePlugins: { preflight: false, },

to the tailwind.config.js and it worked for me!

Yes, adding the corePlugins as a top-level property in the module.exports does solve the problem as it disables Tailwind's preflight styles, which can help resolve Ant Design component positioning issues caused by conflicting CSS resets. But there are consequences since this disables Tailwind's base styles