老师，我的问题是关于第三方框架video.js。
来源：8-1 videojs（1）
慕斯0469344
2019-09-03 21:22:47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video.js</title>
<link rel="stylesheet" href="videojs/video-js.min.css">
<script type="text/javascript" src="videojs/video.min.js"></script>
</head>
<body>
<video id="my-video" class="video-js vjs-big-play-centered" controls data-setup="{}" width="960" height="400" preload="auto" poster="data/poster.jpg">
<source src="data/imooc.mp4">
</video>
</body>
</html>老师，我想问下，为什么视频中老师直接在class中添加“vjs-big-play-centered ”视频中的按钮就从左上方移动到中间了呢？这是video.js中已经封装好的吗？
写回答
1回答
-
同学你好，
是video-js.min.css中设置好的哦，如下：
按钮是一个button，有定位样式：
当添加上vjs-big-play-centered类名后，有新样式覆盖了：
定位left和top值为50%，然后再设置margin-top和margin-left值为宽高的一半（负值），这样就实现了水平垂直居中显示。
自己可以测试下，祝学习愉快！
0
相似问题