Css 在html5中，如何确保两个图像下面的项目始终居中

因此，我在图像旁边有一个段落文本，对于默认的计算机屏幕，理想情况下，我希望图像的高度大小能够防止文本在其下方缠绕，因此我有时会调整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>

试试这个：

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

懂古典音乐
宋空懂古典音乐。古典音乐对元数据的要求与流行/摇滚音乐大不相同，通常不仅对表演者，而且对参与者都有贡献
指挥、管弦乐队和作曲家。在流行乐/摇滚乐中，专辑通常代表艺术家的艺术意图，即专辑是构思出来的
并作为一个单一的工作机构创建。古典音乐更为复杂，古典作曲家以交响乐或奏鸣曲的形式创作
我们称之为这些作品，而不是专辑。这些工程包括子工程或移动，可能有额外的标高。当古典音乐作为专辑发行时，它可能只包含一部分内容
工作，或者相反，多个工作，所以相册分组可能不是最重要的分组。
SongKong识别经典版本，并在专用元数据字段中捕获这些附加信息。
它还可以识别其他经典信息，如作品编号和表演者及其乐器。SongKong可以自动更新新的iTunes工作和移动字段。

.剖面图{
高度：自动；
}
.科{
明确：两者皆有；
填充顶部：50px；
填充底部：50px；
}
.左对齐{
浮动：左；
右边距：20px；
明确：两者皆有；
}
.右对齐{
浮动：对；
左边距：20px；
明确：两者皆有；
}
.videowrapper-iframe{
保证金：0自动；
显示：表格；
宽度：500px；
高度：300px；
}
1.清除故障{
明确：两者皆有；
}

---

实时示例

在视频iframe上使用

.videowrapper{text align:center；width:100%}

和

iframe{display:；inline block}

一个好的答案需要解释解决问题的方法issue@grinmax谢谢，我尝试了你的JSFIDLE，删除了一些比图片高度短的文本，效果非常好，然而，对我的实际代码进行更改并没有起作用，我看不出有什么不同（请看“下定决心”部分），有什么想法吗？@LGSon我无法在我的网站上实现这一点，知道为什么吗please@PaulTaylor然后试试我的解决方案。。。非常简单，只需将textwrapper和clearfix规则添加到it@PaulTaylor您有错误的css属性

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