Question

我需要在嵌入媒体下方显示一些文字（在本例中为视频），我希望文字与视频对齐。

我不知道如何做到这一点，因为布局需要流畅。有些视频会比其他视频更广泛。

目前文本右对齐包装div。

这是我到目前为止的一个小提琴http://jsfiddle.net/thwackukulele/2N6a9/

我希望文字“在我们的YouTube频道观看更多视频”与视频的右边缘保持一致。

感谢您的帮助！

Answer 1

如果您希望文字位于视频下方，但右侧与视频的右边缘对齐，请将＆lt; h4 class =“caption”＆gt; “framewrap”元素中的元素，然后应用以下样式：

h4.caption { margin:auto; text-align:right; width:640px }

我希望这可以帮助你。

ps：对于不同宽度的视频，我认为最好的方法是用javascript检测它，然后相应地设置h4.caption的宽度。您可以通过jquery维度包相对轻松地完成此操作。要用普通的html / css开箱即用，我缺乏知识;）

Answer 2

视频的宽度可能会有所不同，但它们的内容从不会超过内容单元上的960px设置？

如果内容单元集中所有内容，请将framewrap设置为内联块。这将使其收缩包装到其内容（此处为视频），如果内容单元在其上设置了text-align：center，则内联块framewrap将居中（无论它的宽度是什么））。现在，因为它的宽度与最宽的内容（这里是iframe，内联元素）有关，所以h4可以设置为右对齐文本，文本应该限制在framewrap的右侧，因为块h4仍然是扩展到任何帧包裹的100％。

啊，你在那里有很多定位和边距，我看不到他们在做什么，所以我不希望这段代码能真正解决你的问题，但是...看看JSFiddle就像查看屏幕放大镜。有趣的东西http://jsfiddle.net/2N6a9/2/我制作了内容单位蓝色和框架包裹红色，这样你就可以看到标题是如何被包裹的。如果你想将文本稍微向左移动一点，你可以在h4上添加一些正确的填充。

哦我没有为IE6,7等添加代码。如果你支持它们，请记得设置framewrap以显示：内联块声明之后的内联。

编辑2：我没有将facebook的内容移回左侧

Answer 3

http://jsfiddle.net/RPTgB/ 我认为这就是你要找的东西。我刚刚创建了一个.innerframe DIV，并在左右两侧设置了自动边距，并将宽度设置为与iframe相同。

<div class="innerframe">
<iframe width="640" height="480" src="http://www.youtube.com/embed/D35uQCtr4EY" frameborder="0" allowfullscreen class="frame"></iframe>
<h4 class="caption"><a>Watch more videos on our YouTube Channel</a></h4>
</div>

然后css就是

.innerframe {
width:640px;
margin-left: auto;
margin-right: auto;
}

希望这就是你要找的东西。

右对齐文本到嵌入媒体的边缘

3 个答案: