时间戳

首页 > 解决方案 > 如何在tailwindcss中将图像居中于另一个图像

css - 如何在tailwindcss中将图像居中于另一个图像

问题描述

朋友们，我在将图像居中在另一个图像上并在顺风 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>

图标在右下角

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

谢谢您的帮助

标签： csstailwind-css

解决方案

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

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

或将这些类添加到父 div flex-row content-center justify-center

推荐阅读