videoJS的播放按钮怎么居中？

V2EX = way to explore

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

现在注册

已注册用户请登录

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

不理解他想表达什么

播放按钮

videoJS

居中

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

emric

2013 年 10 月 2 日

http://gist.github.com/6789472

scarlex

2013 年 10 月 4 日

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

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

kawaiiushio

2013 年 10 月 4 日

@scarlex 1楼不是空白的吗？

scarlex

2013 年 10 月 4 日

@kawaiiushio 你看不到？

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

kawaiiushio

2013 年 10 月 4 日

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

kawaiiushio

2013 年 10 月 4 日

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

IShinji

2014 年 4 月 4 日

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

kawaiiushio

2014 年 4 月 7 日

@IShinji less里面我看到了~

huage

2017 年 2 月 4 日

<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 年 5 月 20 日

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