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!