Как центрировать текст под iFrame, когда текст обернут вокруг него

Question

У меня плавающий влево iframe и текст, обернутый вокруг него. Я пытаюсь разместить текст под ним по центру, но все, что я пробовал, похоже, не работает или портит весь формат .. У меня есть код и предварительный просмотр здесь. https://codepen.io/Religion/pen/QWydbow. и что находится в коде ниже. Спасибо!

<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, чтобы он оставался только на всю ширину, и вы отображали его как гибкий, чтобы вы могли выровнять его по центру. Затем текст, который вы помещаете в div с классом text-center, и закрываете div, пока не закончите с текстом, который хотите центрировать. Перед этим вы должны добавить <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> в заголовок.

    <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>