logo标签列表

如何在 div 标签中居中视频标签？

css
4
我似乎无法使用通常的“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>
5个回答
14

如果您不知道视频的宽度，仍然可以使用 CSS 变换将其居中:

video {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
1
我想指出的是，如果您事先不知道视频的尺寸，这是我发现的唯一有效的解决方案。所有其他解决方案都需要为视频元素指定固定大小。 - Rabbit
这对我很有效，而且我已经尝试了所有其他选项。当我的视频需要响应时，它也可以正常工作。谢谢！ - Davbog
这会影响到“三个点菜单”。 - Gereon99
13

实际上，当涉及到样式表时，html5视频以及图像都被视为文本。因此，您需要进行的唯一更改是在css代码中。使用您用 <div id="video> 包装视频的标签，您只需添加以下内容：

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

与其整天调整边距，不如……

6

您必须在周围的<div id="video">上设置margin: 0 auto，而不是在<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;
}
0
//Try This
#parant{
 width:100%;
 height:300px;
 text-align:center;
}
#video{
width:100px;
height:100px;
margin:auto;

}

1
尽管这段代码可能有助于解决问题，但它并没有解释为什么以及如何回答这个问题。提供这种额外的上下文将显著提高其长期价值。请编辑您的答案以添加说明，包括适用的限制和假设。 - Toby Speight
0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接