Question

如何让我的文档和视频在我的bootstrap header jumbotron水平对齐？我只是希望内容与其下面的标题一致。

CSS

.container2 {
      display: flex;
      flex-flow: row nowrap; /* Align on the same line */
      justify-content: space-between; /* Equal margin between the child elements */
      }

HTML

<div class="container2">
         <div class="left">
            <p  style=" margin: 12px auto 6px auto; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; display: block;"></p>
            <iframe class="scribd_iframe_embed" src="https://www.scribd.com/embeds/344420651/content?start_page=1&view_mode=scroll&access_key=key-8enfvS2L2K0nh24zmVG8&show_recommendations=true" data-auto-height="false" data-aspect-ratio="0.7729220222793488" scrolling="no" id="doc_97914" width="400" height="400" frameborder="0"></iframe>
         </div>
         <div class="center">
            <p  style=" margin: 12px auto 6px auto; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; display: block;"></p>
            <iframe class="scribd_iframe_embed" src="https://www.scribd.com/embeds/344420651/content?start_page=1&view_mode=scroll&access_key=key-8enfvS2L2K0nh24zmVG8&show_recommendations=true" data-auto-height="false" data-aspect-ratio="0.7729220222793488" scrolling="no" id="doc_97914" width="400" height="400" frameborder="0"></iframe>
         </div>
         <div class="right">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/6O7VlTCPYVU" frameborder="0" allowfullscreen></iframe>
         </div>
      </div>

完整网站代码 - https://jsfiddle.net/1mx7ygr1/

我知道我正在使用引导程序并使用其他方式对页面进行编码，而且网页没有完全响应。然而，试图获得基本要点并得到一个基本的理解，而不是发展我的技能，因为我刚刚开始。

Answer 1

.left和.center div中有一个不必要的段落标记。这些段落都是空的。他们也在增加空间。

将它们更改为display:none或删除（如果您愿意）

.left p,.center p{
  display:none !important;
}

fiddle is here

如何在我的标题下对齐我的div？

1 个答案: