Question

嗨，我只是在特定地点对齐div（使用iframe的视频）时遇到问题。

看到这张图片。 Example

这就是刚刚发生的事情

我正在使用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; 
}

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

Answer 1

不确定为什么要在嵌入容器上设置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%;，您可以通过将左右设置为0和margin：auto来使其居中;左右两侧。

Answer 2

试试

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

不能使用css，html在正确的位置对齐div

2 个答案: