代码之家 › 专栏 › 技术社区 › user824624

如何使按钮与顺风垂直和水平居中

tailwind-css css

user824624 · 技术社区 · 3 年前

我想构建一个带有顺风的视频播放器UI,播放按钮应该位于播放器容器的中间。

我试着编码,但还是失败了

<div style="width: 600px;height:300px" class="flex items-center justify-center">
        <button class="w-72 h-72 rounded-full  bg-blue-500 hover:bg-red-500 text-white">
            <i class="el-icon-video-play text-2xl"> </i>
        </button>
        <video id="vid1" width=600 height=300 controls style="width: 100%;height: 100%;" class="video-js vjs-default-skin" preload="auto">
            <source :src="url" type="video/mp4">
        </video>
</div>

有什么建议吗?

1 回复 | 直到 3 年前

Mahdad 3 年前

您可以将按钮设置为绝对值,如下所示:

<button
        class="absolute w-16 h-16 rounded-full bg-blue-500 hover:bg-red-500 text-white">
        <i class="el-icon-video-play text-2xl"> </i>
</button>

推荐文章

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

IvonaK · 使用Vite和React在Tauri应用程序中集成shadcn/ui和Tailwind CSS v4

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

Unik6065 · 使用Vite在Laravel中覆盖默认顺风颜色的问题

1 年前

Reagan · 使用tailwind CLI在我的PHP项目中添加tailwind不会在frotand中显示样式。output.css为空或图标正确

1 年前

new221 · 应用顺风前缀时,画布上的preline ui不起作用

1 年前

Edward B. · 使用Tailwind Css制作一个包含子菜单的菜单,子菜单周围有连续的边框

1 年前

foO · 如何使用动态条件设置活动链接文本颜色

1 年前