埋め込みメディアの端にテキストを右揃え

Question

埋め込みメディア（この場合はビデオ）の下に表示するテキストが必要です。このテキストをビデオに右揃えにしたいと思います。

レイアウトが流動的である必要があるため、これを行う方法がわかりません。一部のビデオは他のビデオよりも幅が広いでしょう。

現在、テキストは折り返し部分に右揃えされています。

ここで私は、テキスト、ビデオの右端に揃えるために、「私たちのYouTubeチャンネル上でより多くのビデオを見る」を希望私はhttp://jsfiddle.net/thwackukulele/2N6a9/

これまで持っているものとフィドルです。

ありがとうございました！

Answer 1

動画の幅はさまざまですが、コンテンツユニットに設定されている960pxの幅より広いことはありませんか？

コンテンツユニットがすべてをセンタリングしている場合は、framewrapをinline-blockに設定します。これにより、内容（ここではビデオ）にシュリンクラップされ、コンテンツ単位にtext-align：centerが設定されている場合、インラインブロックのフレームラップが中央に配置されます（幅に関係なく、 ）。さて、幅が最も広いコンテンツ（ここのiframe、インライン要素）に反しているので、h4はtext-align rightに設定することができ、ブロックh4はフレームラップの右側に制限する必要がありますどのようなフレームラップでも100％に拡張できます。

ああ、あなたは何をしているのか分からないので、このコードは本当にあなたの問題を解決するとは思っていませんが... JSFiddleを見てみるのは、スクリーンの拡大鏡を介して。面白いものhttp://jsfiddle.net/2N6a9/2/コンテンツユニットの青とフレームラップを赤にして、キャプションがどのようにラップされるのかを確認できました。テキストを少し左に振りたい場合は、h4にちょっとしたパディングを追加することができます。

私はIE6,7などのコードを追加しませんでした。サポートしている場合は、インラインブロック宣言の後にインラインを表示するようにframewrapを設定してください。

編集2：私は戻ってFacebookのものを移動しませんでしたが、私はそれはあなたが探しているものだと思う

Answer 2

テキストは、ビデオの下になりたいが、ビデオの右端に揃え右には、「framewrap」要素内< H4クラス=「キャプション」>要素を入れて、その後、次のスタイルを適用する場合：

を

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

私はこれがあなたに役立つことを願っています。

ps：さまざまな幅の動画の場合、javascriptで検出し、それに応じてh4.captionの幅を設定するのが最善の方法だと思います。これは、jqueryディメンションパッケージを使用して簡単に行うことができます。 普通のhtml/cssでこれを行うには、知識が不足しています;

Answer 3

http://jsfiddle.net/RPTgB/ を残しました。私はちょうど.innerframe DIVを作成し、余白をautoに左右に設定し、幅を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; 
} 

ました。