0

ビデオを大きな画像の上に配置し、水平方向と垂直方向の両方で画像内の中央に配置するための正しい HTML は何ですか?

ビデオのコードは次のとおりです。

<br>
<div style="float:right;">
  <div id="ext-gen1825" autoplay="false" height="187" width="224" class="ddcPlayer-holder" style="-moz-user-select: none; background-color: #515151; -moz-border-radius: 5px; border-radius: 5px; background-repeat: no-repeat; background-position: center;width: 224px;height: 187px;background-image: url(http://videos2.dealer.com/clients/b/baierlautomotivemars/b9716e230a0d02b7010c94a788f23c9e_clicktoplay_en_US.png);" ddcplayerinfo="http://videos2.dealer.com/clients/b/baierlautomotivemars/b9716e230a0d02b7010c94a788f23c9e.xml-224px-187px">
    &nbsp;
  </div>
</div>

画像のコードは次のとおりです。

<img id="ext-gen2174" src="http://pictures.dealer.com/b/baierlusedcars/0487/31f397280a0d02b700ae8af470747bb2.png"href="http://pictures.dealer.com/b/baierlusedcars/0487/31f397280a0d02b700ae8af470747bb2.png" title="Better Story.png" class="wysiwyg-image" tabindex="30000" style="height: 202px; width: 236px;">
4

2 に答える 2

0

コードがないと、探しているものを正確に把握するのが難しい場合があります。これを実現するにはさまざまな方法があります。

この div 内に背景画像とビデオを含む div を作成します。

また;

で画像を含む div をposition: relative;作成し、その div 内にビデオを含む div を作成し、 を設定しますposition: absolute;。それに応じて上部と左側の css 属性を設定します (50% ですが、場合によってはそれより少なくしたい場合もあります)。

于 2012-10-05T17:38:49.407 に答える
0

これを行う最も簡単な方法は、テーブルを使用することだと思います。テーブルにはセルが 1 つしかなく、セルを埋めると、画像が自動的に中央に配置されます。以下の iframe を使用しました。これは、YouTube からの埋め込みビデオのデフォルト コードであるためです。 

<table background="http://www.example.com/images/example.jpg" cellpadding=50>
<tr>
<td>
<iframe width="420" height="315" src="http://www.youtube.com/embed/te6qG4yn-Ps"  frameborder="0" allowfullscreen></iframe>
</td>
</tr>
</table>
于 2012-10-05T17:39:02.280 に答える