29850

[code]

    <div id="wrapper" class="inner clearfix top">
    <article class="clearfix">
    <div id="content">
    <div id="top_btn">
    <ul class="clearfix">
    <li id="about"><a href="about/index.html"><span class="l1">***
    に</span>ついて</a></li>
    <li id="area"><a href="area/index.html"><span class="l1">***</span>***
    </a></li>
    <li id="voice" class="mr0"><a href="voice/index.html"><span class="l1">***
    </span>の声</a></li>
    <li id="try"><a href="try/index.html"><span class="l1">無料</span>**</a></li>
    <li id="price"><a href="price/index.html">料金</a></li>
    <li id="faq" class="mr0"><a href="faq/index.html"><span class="l1">よく
    ある</span>質問</a></li>
    </ul>
    </div>
    <p class="btnContact text-center pc_none"><a href="contact/index.php">**<br>
    <span class="bold">***</span></a></p>
    <div id="Video">
    <iframe width="485"
    height="300"src="https://www.youtube.com/embed/h77UYU84VOI" frameborder="0" 
    allowfullscreen></iframe>
    </div>
    
[/code]

このコードで現在次のように表示されます。

[![画像の説明をここに入力](https://i.stack.imgur.com/SvZiw.jpg)](https://i.stack.imgur.com/SvZiw.jpg)

動画を入れる部分をid=Videoなdivで囲み、

[code]

    #Video {
      position:replative;
      top: **px;
      left: **px;
      bottom:**px;
      right:**px;
    }
    
[/code]

とスタイルシートで指定しているのですが、このrelative, は、写真の一番上右横の「良く有る質問」のアイコン写真、CSSでは

[code]

    #top_btn ul li#faq a {
      background-image:url(../img/icon_faq.png);
      /* 略 */
    }
    
[/code]

で指定して確かにサーバに存在するモノにrelativeなのでしょうか？またabsoluteで簡単な実験をした事は有るのですが、ここまで作りこまれたHPでどうしたらいいのかわかりません。

この動画をもう少しセンター方向へ移動するにはどうしたら良いのでしょうか？

宜しくお願い致します(m_m)。


CC BY-SA 3.0
2016-10-23T16:59:07.347
29849
2016-10-24T03:31:59.033
2016-10-24T03:31:59.033
8000
19182
question
css
埋め込んだYouTube動画を左右中央に配置したい


画面の横幅はブラウザによって変わるので、  
中央に表示したいのであれば、`position:`を使うのではなくて`margin`を使用してはどうでしょうか。  
スタイルで、

[code]

    #Video iframe {
        display : block;
        margin : 0 auto;
    }
    
[/code]

のようにすることでセンタリングできると思います。

例：

[code]

    #Video iframe {
     display : block;
     margin : 0 auto;
    }
[/code]

[code]

    <div id="Video">
    <iframe width="485"
    height="300"src="https://www.youtube.com/embed/h77UYU84VOI" frameborder="0" 
    allowfullscreen></iframe>
    </div>
[/code]


CC BY-SA 3.0
2016-10-23T18:15:55.317
29850
2016-10-23T18:15:55.317
5044
29849
answer