I am creating an overlay and I want to have a close button next to the image, but I don't want the image to be off-center without using absolute positioning. I just can't figure out how to do it.

https://play.tailwindcss.com/MPIT7SvmPe

CodePudding user response：

You can add a padding to the left side e.g. p-12 and make the button w-10. And add a gap-2. Now the picture will have a invisible padding on the left and a space with the button on the right, both with the same with of 12. This makes that the image stays centered.

Example: https://play.tailwindcss.com/QGAepXGwhd

Hope this helps.