videoJS的播放按钮怎么居中？

This topic created in 4616 days ago, the information mentioned may be changed or developed.

不理解他想表达什么

播放按钮

videoJS

居中

10 replies • 2020-05-20 12:49:50 +08:00

emric

Oct 2, 2013

http://gist.github.com/6789472

scarlex

Oct 4, 2013

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

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

kawaiiushio

Oct 4, 2013

@scarlex 1楼不是空白的吗？

scarlex

Oct 4, 2013

@kawaiiushio 你看不到？

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

kawaiiushio

Oct 4, 2013

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

kawaiiushio

Oct 4, 2013

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

IShinji

Apr 4, 2014

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

kawaiiushio

Apr 7, 2014

@IShinji less里面我看到了~

huage

Feb 4, 2017

<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

May 20, 2020

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