html - HTML 別の画像に対するオブジェクトの位置を変更する方法

Question

私のウェブサイトには、画面を示す画像があります。その画面内で、その画面内に埋め込まれた youtube ビデオを移動しました。したがって、埋め込みは画像の上にあります。これを使用して、埋め込まれたビデオを正しい場所に配置できます。

<div style="position:relative"> 
  <img src="screen.png" />
  <div style="position:absolute; left:0px;top:0px;">    
    <embed src="http://www.youtube.com/embed/qoSEzTpbxP4" width="310" height="210" allowfullscreen=true"></embed>           
  </div>
</div> 

全体を中央に配置したいのですが、これをタグで囲むと、位置のために明らかに何も中央に配置されません。埋め込みは、画像の左からではなく、ウィンドウの左から 544 のままです。画像の中心位置に合わせて埋め込みを移動させる方法はありますか?

(注: すべてのスタイルに個別の CSS ドキュメントを使用する必要があることは承知していますが、現時点ではそのことに興味はありません。ただ機能させたいだけで、後でスタイルを別の場所にカプセル化する可​​能性があります)

Answer 1

これを試して

<div style="margin: 0px auto; text-align: center; width: 500px; position: relative;"> 
  <img src="screen.png">
  <div style="position: absolute; z-index: 1; margin: 0px auto; text-align: center;">   
    <embed width="425" height="349" allowfullscreen="true&quot;" src="http://www.youtube.com/embed/qoSEzTpbxP4">           
  </div>
</div>