html - CSS 3 视频元素样式

Question

你好，你能帮我设计视频元素样式吗？

这是我的 html 的样子 http://jsfiddle.net/SXCmX/2/

html, body {
    height: 100%;
    background-color: gray;
}

body {
    padding: 0;
    margin: 0;
}

#main-content {
    width: 960px;
    background: orange;
    height: 100%;
}

#header {
    background-color: black;
    height: 100px;
}

#video-player-content {
    background-color: green;
}

#video-player {
    background-color: yellow;

}

#control-panel {
    background-color: lightblue;
}

<div id="main-content">
    <header id="header">
    </header>

    <div id="video-player-content">
        <video id="video-player">

        </video>
        <div id="control-panel">
            <button>a</button>
            <button>b</button>
            <button>c</button>
            <button>d</button>
        </div>
    </div>
</div>

1) 我想删除视频元素和控制面板之间的空间(黄色矩形下方的空间)2) 我也希望将主要内容和视频播放器元素居中

非常感谢您的帮助

最好的问候 ol 团队

Answer 1

1).要消除视频和控制栏之间的空间，请制作 video 元素 display: block。默认情况下它是 inline-block，因此由空格(换行符、制表符等)引起的间隙

2).要使视频元素居中，请给它一个 margin: 0 auto。

#video-player {
    background-color: yellow;
    display: block;
    margin: 0 auto;
}

演示:http://jsfiddle.net/SXCmX/4/