gpt4 book ai didi

css - 在 div 中垂直和水平居中播放按钮

转载 作者:行者123 更新时间:2023-12-04 13:05:40 25 4
gpt4 key购买 nike

<分区>

我有这个jsfiddle demo .

我在中间有一个 vimeo 电影的缩略图(这里是一个占位符)我想要一个 play btn。

整个图像都是可点击的,所以播放按钮只是为了说明。

我想要播放按钮正中。

我可以用负边距来做,但我真的不知道播放按钮的大小。

我怎样才能在知道播放按钮尺寸的情况下将播放按钮置于中心位置。

.video_thumbnail {
border: 1px solid red;
position: relative;
}

.video_thumbnail:hover {
cursor: pointer;
}

.video_thumbnail .play-btn {
background: white;
background: blue;
display: inline-block;
padding: 25px;
position: absolute;
top: 50%;
left: 50%;
/*
margin-left: -35px;
margin-top: -35px;
*/
}

.video_thumbnail .play-btn:after {
content: "";
display: block;
position: relative;
left: 2px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com