文本環繞時如何將 iFrame 下的文本居中

Question

我的 iframe 向左浮動，文字環繞在它周圍。 我正在嘗試將文本放在它對齊的中心下方，但我嘗試過的一切似乎都不起作用或弄亂了整個格式。我在這里有代碼和預覽。 https://codepen.io/Religion/pen/QWydbow 。 以及下面的 codepen 上有什么。 謝謝！

<style>
 .container p {
  font-size:1.2rem;
 }

.container {
  height:100%;
  max-height:100%;

}



</style>


<div class = "container">

   <iframe style = "float:left;margin:5px 25px 0 0;margin-bottom:20px;  width:350px; height:300px;" src="https://embed-fastly.wistia.com/deliveries/7f74ec7de31d90e32a1d465fcebc1d0e12a27d18/file.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


<h2 class = "all-headings">Periodontal Maintenance</h2>
<p><strong>Periodontal diseases are infections of the gums, which gradually destroy the support of your natural teeth.</strong> There are numerous disease entities requiring different treatment approaches. Dental plaque is the primary cause of gum disease in genetically susceptible individuals. Daily brushing and flossing will prevent most periodontal conditions.</p>
<br>
<h2 class = "all-headings">Why is oral hygiene so important?</h2>

<p>Adults over 35 lose more teeth to gum diseases, (periodontal disease) than from cavities. Three out of four adults are affected at some time in their life. The best way to prevent cavities and periodontal disease is by good tooth brushing and flossing techniques, performed daily.</p>

<p>Periodontal disease and decay are both caused by bacterial plaque. Plaque is a colorless film, which sticks to your teeth at the gum line. Plaque constantly forms on your teeth. By thorough daily brushing and flossing you can remove these germs and help prevent periodontal disease.</p>
<br>

<p>Periodontal diseases can be accelerated by a number of different factors; however, it is mainly caused by the bacteria found in dental plaque, a sticky colorless film that constantly forms on your teeth. If not carefully removed by daily brushing and flossing, plaque hardens into a rough, porous substance known as calculus (or tartar).</p>

<br>


</div>

Answer 1

您可以將 iframe 包裝在一個 div 中並給它一個兄弟標題嗎？

 .iframe-wrap { float:left; margin: 20px; width:200px; height:150px; display: block; } iframe { width: 100%; }.caption { text-align: center; }

 <div class="container"> <div class="iframe-wrap"> <iframe src="https://embed-fastly.wistia.com/deliveries/7f74ec7de31d90e32a1d465fcebc1d0e12a27d18/file.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <div class="caption">The caption.</div> </div> <p>Polaroid direct trade 90's migas green juice ugh selvage chambray freegan literally try-hard drinking vinegar franzen church-key dreamcatcher. Air plant selfies waistcoat activated charcoal crucifix literally flexitarian, Blue bottle poke kombucha lyft. shoreditch flexitarian offal 3 wolf moon 8-bit, Sustainable vegan pabst affogato. banjo kombucha poutine direct trade jianbing. Lomo wolf fixie YOLO, Vinyl gochujang freegan synth gluten-free ugh. flexitarian cold-pressed cray offal tote bag.</p> <p>Polaroid direct trade 90's migas green juice ugh selvage chambray freegan literally try-hard drinking vinegar franzen church-key dreamcatcher. Air plant selfies waistcoat activated charcoal crucifix literally flexitarian, Blue bottle poke kombucha lyft. shoreditch flexitarian offal 3 wolf moon 8-bit, Sustainable vegan pabst affogato. banjo kombucha poutine direct trade jianbing. Lomo wolf fixie YOLO, Vinyl gochujang freegan synth gluten-free ugh. flexitarian cold-pressed cray offal tote bag.</p> </div>

Answer 2

您將 iframe 排成一排並放置完整的 col-md-12，這樣它就可以單獨使其全寬，並將其顯示為 flex，以便您可以在中心對齊。 然后你放置一個帶有文本中心 class 的 div 的文本，然后關閉 div 直到你完成要居中的文本。 在此之前，您必須添加<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">在您的 header 中。

    <div class = "container">
        <div class="row">
          <div class="col-md-12" style="display:flex; justify-content:center">
       <iframe style = "float:left;margin:5px 25px 0 0;margin-bottom:20px;  width:350px; height:300px;" src="https://embed-fastly.wistia.com/deliveries/7f74ec7de31d90e32a1d465fcebc1d0e12a27d18/file.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      </div>

    <div class="text-center">
    here goes the text below the iframe
    </div>