gpt4 book ai didi

Flexbox 中的 HTML CSS 视频

转载 作者:行者123 更新时间:2023-11-28 02:13:46 28 4
gpt4 key购买 nike

<!DOCTYPE html> 
<html>
<style>
.d1 {
background: blue;
padding: 10px;
display: flex;
}
video {
margin: 10px;
width: 100%;
max-width: 500px;
}
</style>
<body>

<div class="d1">
<video controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>

</body>
</html>

我在 flexbox 中使用了一个 video ,除了两点之外,代码工作正常:1) 视频大小不合适适合下面的控制线。我怎样才能让它合适?我认为这与对齐有关... 2) 我希望仅水平调整 video 的大小。为此,我搜索并使用了 width: 100% 并且它有效,但是当我调整它的大小时,正确的部分似乎忽略了我给它的 margin :

enter image description here

最佳答案

 justify-content: center;
align-items: center;

将上面的样式添加到 css 中。试试下面的代码片段

<!DOCTYPE html>
<html>
<style>
.d1 {
background: blue;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}

video {
margin: 1rem;
width: 100%;
}
</style>

<body>

<div class="d1">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>

</body>

</html>

关于Flexbox 中的 HTML CSS 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48599918/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com