Question

我似乎无法用通常的“margin：0px auto 0px auto”来定位此视频标签。帮助小伙子们！感谢您查看这个！

#wrapper #trailer {
    position: absolute;
    z-index: 3;
    margin-top: 55px;
    width: 987px;
    height: 620px;
    background-color: #000;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border: 1px solid #009;
}
#wrapper #trailer #close {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 231px;
    cursor: pointer;
}
#wrapper #trailer video {
        margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border: 1px solid #009;
}

和html并按要求解释我的场景：

<div id="trailer">
<img id="close" src="images/close.png" alt="close" />
<div id="video">
<video controls  autoplay="autoplay" poster="video/trailer.jpg" width="600"      onclick="if(/Android/.test(navigator.userAgent))this.play();">
<source src="video/trailer.mp4" type="video/mp4" />
<source src="video/trailer.webm" type="video/webm" />
<source src="video/trailer.ogv" type="video/ogg" />
<embed src="video/flashfox.swf" width="600" height="480"  flashVars="autoplay=true&amp;controls=true&amp;loop=true&amp;src=trailer.mp4" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
</video>
</div>
</div>

Answer 1

实际上，html5视频以及图像在样式表中都算作文本。因此，您必须进行的唯一更改将是您的css代码。使用包装视频的<div id="video>标记，您只需添加：

#video {
   text-align: center;
   //rest of rules here
}

而不是整天玩边距。

Answer 2

如果你不了解你的视频，你仍然可以使用css转换来集中它：

video {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Answer 3

您必须在周围的margin: 0 auto上设置<div id="video">，而不是<video>标记：

#video {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border: 1px solid #009;
}

而不是

#wrapper #trailer video {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border: 1px solid #009;
}

Answer 4

您需要在视频div上设置宽度，以便margin: 0 auto;工作正常。

Answer 5

//Try This
#parant{
 width:100%;
 height:300px;
 text-align:center;
}
#video{
width:100px;
height:100px;
margin:auto;

}

如何将视频标记置于div标签中？

5 个答案: