videoJS的播放按钮怎么居中？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4096 天前的主题，其中的信息可能已经有所发展或是发生改变。

不理解他想表达什么

播放按钮

videoJS

居中

10 条回复 • 2020-05-20 12:49:50 +08:00

emric

2013-10-02 13:30:57 +08:00

http://gist.github.com/6789472

scarlex

2013-10-04 09:41:54 +08:00

木有用过videojs，单纯从css来看。
content 和 font-family 可以搜搜font icon的资料，简单来说就是利用字体来做icon。
line-height那个是用来垂直居中按钮里的字体，也就是icon（因为在font icon中icon也是字体），只要line-height等于button的高度，就是居中啦。

如果是整个按钮居中，我觉得 @emric 的写法是正确的 :smile:

kawaiiushio

2013-10-04 11:57:49 +08:00

@scarlex 1楼不是空白的吗？

scarlex

2013-10-04 15:43:13 +08:00

@kawaiiushio 你看不到？

.vjs-big-play-button {
left: 50% !important;
top: 50% !important;
margin-left: -2em;
margin-top: -1.3em;
}

kawaiiushio

2013-10-04 18:13:55 +08:00

@scarlex 真看不到不过你的我看到了。。

kawaiiushio

2013-10-04 18:14:07 +08:00

@emric ↖(￣▽￣") 很神奇

IShinji

2014-04-04 12:44:08 +08:00

认真看文档有个样式是 vjs-big-play-centered

kawaiiushio

2014-04-07 15:41:37 +08:00

@IShinji less里面我看到了~

huage

2017-02-04 16:07:52 +08:00

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" poster="videojs/oceans.png" src="videojs/oceans.mp4" data-setup="{}">
<source src="videojs/oceans.mp4" type="video/mp4">
</video>

增加 vjs-big-play-centered

protobuf

2020-05-20 12:49:50 +08:00

@huage 为晚来的同学们指出，9 楼为正解！在 class 中增加：vjs-big-play-centered