CSS 3 视频元素样式答案

【问题标题】：CSS 3 video element stylingCSS 3 视频元素样式
【发布时间】：2014-03-02 18:14:25
【问题描述】：

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

这是我的 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

【问题讨论】：

标签： html css video html5-video stylesheet

【解决方案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/

【讨论】：