如何在tailwindcss中将图像居中于另一个图像答案

【问题标题】：how to center image over another image in tailwindcss如何在tailwindcss中将图像居中于另一个图像
【发布时间】：2021-10-31 17:24:45
【问题描述】：

朋友们，我在将图像居中于另一个图像上并在顺风 css 中居中时遇到问题。

    <div className="w-1/6 h-11 relative text-center">
        <span className="absolute left-0 right-0 w-full h-full">
            <Image className="rounded-md" src="https://files.virgool.io/upload/users/785524/posts/sojszup8zfru/72bgkgkumdcq.jpeg" width="50" height="50" alt="video of" />
        </span>
        <span className="absolute">
            <Image src="/svg/play.svg" alt="play video" width="25" height="25" />
        </span>
    </div>

我的结果是：

或者如果设置在播放图标的顶部和左侧

       <span className="absolute left-1/2 top-1/2">
            <Image src="/svg/play.svg" alt="podcast icon" width="25" height="25" />
        </span>

图标在右下角

你看到播放图标在图片的左上角，我想在中间

感谢您的帮助

【问题讨论】：

你能分享你的风格吗？

标签： css tailwind-css

【解决方案1】：

你可以试试这个类 object-center 到 svg 图片

参考：https://tailwindcss.com/docs/object-position

或将这些类添加到父 div flex-row 内容中心对齐中心

【讨论】：