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;
}

CSS 3视频元素样式

1 个答案:

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