gpt4 book ai didi

html - 无法使用 css、html 在正确的位置对齐 div

转载 作者:行者123 更新时间:2023-11-28 03:58:04 25 4
gpt4 key购买 nike

您好,我只是在将 div(使用 iframe 的视频)对齐到特定位置时遇到问题。

请看这张图片。 Example

这就是刚刚发生的事情

Result

我正在使用 Bootstrap 。

这是我的 html 代码

 <div class="jumbotron" style="padding-top: 20px;">
<div class="container">
<div class="row">
<!-- Header Content -->
<div class="col-sm-12 text-shadow-area">
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<!-- Video Section -->
<div class="embed-container"><iframe class="frame" src="https://www.youtube.com/embed/5buccFsPJbg?autoplay=0&controls=0&showinfo=0&modestbranding=1&autohide=1&&rel=0&loop=1" frameborder="0" allowfullscreen></iframe></div>
<!--/END Video Section-->
</div>
<!-- /End Header Content -->
</div>
</div>

这是自定义类的css

    .jumbotron {
background: url(../img/bg.jpg) no-repeat;
background-size: cover;
background-position: center center;
position: relative;
min-height: 600px;
margin-bottom:0;
text-align:center;
padding-bottom: 0;
}

.jumbotron:before, #subscribe-bg:before {
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color: rgba(0,0,0,0.3);
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 50%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}


.frame {
border:5px solid #e2574c;
}

我希望视频像示例一样位于背景图片部分的末尾。

最佳答案

不确定为什么要在嵌入容器上设置 max-width: 50%;,我把它放在了 iframe 上。以下是我如何更改代码以使其居中底部对齐:

.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
max-width: 50%;
height: 50%;
}

如果您在绝对定位元素上设置固定宽度,在本例中为 max-width: 50%; 您可以通过将 left 和 right 设置为 0 和 margin: auto 来使其居中;用于左侧和右侧。

关于html - 无法使用 css、html 在正确的位置对齐 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43354222/

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