css - 在 html5 中，如何确保两个图像下方的元素始终居中

Question

所以我在图像旁边有一个段落文本，对于默认的计算机屏幕，我理想情况下希望图像的高度大小可以防止文本在其下方换行，所以我有时会调整 jpeg 以便周围有更大的空间

然后有时我有一个嵌入式视频，我想将其居中显示在屏幕截图中。

问题是如果没有足够的文本那么如果我嵌入一个视频它只以上面文本的宽度为中心而不是整个屏幕，如 所示。

如果文本太多，所以它的流动会破坏图像，那么事情会继续正常工作，问题是当这还不够时。困难在于图像/文本没有完美的设置，因为它会随着屏幕的变化而变化，而且对于翻译的页面，翻译文本的长度也会有所不同，我不想修改每种语言的图像边框。我遇到的问题是，无论如何确保这一点，我总是希望视频居中。

这是示例 html

<div class="Section">
<img src="http://www.jthink.net/songkong/images/classical.png" class="section_image align_left"/>
<h2>Understands Classical</h2>
<p>SongKong understands Classical music. The Metadata demands for Classical are very different to Pop/Rock music, credit is usually given to not only the performer but also the
conductor, orchestra and composer. In Pop/Rock an album usually represents the artistic intent of the artist, i.e. the album was conceived
and created as a single body of work. In Classical it is more complicated, Classical composers work in terms of Symphonies or Sonatas
rather than albums, we call these Works. These works comprise sub works or movements, and there may be additional levels. When Classical music is released as an album it may only contain part of a
work, or conversely multiple works, so the album grouping may not be the most important grouping.
SongKong identifies Classical releases and captures this additional information in dedicated metadata fields.
It can also identify other Classical information such as the Opus No and the performers with their instruments. SongKong can automtically update the new iTunes Work and Movement fields.
</p>
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/6Es-eaG4xPg" name="Classical and iTunes" allowfullscreen></iframe>
</div>
</div>

和CSS

 .section_image {
        height: auto;
    }
    .Section {
            clear:both;
            padding-top:50px;
            padding-bottom:50px;
    }

    .align_left {
        float:left;
        margin-right:20px;
        clear:both;
    }

    .align_right {
        float:right;
        margin-left:20px;
        clear:both;
    }

  .videowrapper iframe {
        margin: 0 auto;
        display:table;
        width: 500px;
        height: 300px;
    }

Answer 1

试试这个:

<div class="Section">
<img src="http://www.jthink.net/songkong/images/classical.png" class="section_image align_left"/>
<h2>Understands Classical</h2>
<p>SongKong understands Classical music. The Metadata demands for Classical are very different to Pop/Rock music, credit is usually given to not only the performer but also the
conductor, orchestra and composer. In Pop/Rock an album usually represents the artistic intent of the artist, i.e. the album was conceived
and created as a single body of work. In Classical it is more complicated, Classical composers work in terms of Symphonies or Sonatas
rather than albums, we call these Works. These works comprise sub works or movements, and there may be additional levels. When Classical music is released as an album it may only contain part of a
work, or conversely multiple works, so the album grouping may not be the most important grouping.
SongKong identifies Classical releases and captures this additional information in dedicated metadata fields.
It can also identify other Classical information such as the Opus No and the performers with their instruments. SongKong can automtically update the new iTunes Work and Movement fields.
</p>
<div class="clear-fix"></div>
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/6Es-eaG4xPg" name="Classical and iTunes" allowfullscreen></iframe>
</div>
</div>


.section_image {
        height: auto;
    }
    .Section {
            clear:both;
            padding-top:50px;
            padding-bottom:50px;
    }

    .align_left {
        float:left;
        margin-right:20px;
        clear:both;
    }

    .align_right {
        float:right;
        margin-left:20px;
        clear:both;
    }

  .videowrapper iframe {
        margin: 0 auto;
        display:table;
        width: 500px;
        height: 300px;
    }

    .clear-fix {
      clear: both;
    }

实例https://jsfiddle.net/h26quu5f/