アンカーとIDを使用してページをスクロールしようとしているときに、うまく機能していない、

Question

私はその上でクリンクしていますここをチェックしてください！ボタン 完全に画面中央に来ていない

ここにはhttp://wineoir.com/index.htmlのリンクはありますか？

私はそのビデオ部分を画面の真ん中に揃えたいです。 pls help me！あなたのページは次のようになる場合

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <img src="img/branding-2.jpg" class="img-responsive center-block" alt="tv"> 

      <p> &nbsp;</p> 

     </div> 
     <div class="col-md-8 "> 
      <p> &nbsp; </p> 
      <p> &nbsp;</p> 
      <p> &nbsp; </p> 
      <p> &nbsp; </p> 
      <h2 class="text-center">Now aerate and pour your wine with a button's push<br> Electronic Wine Aerator</h2> 
      <p class="text-center"><a href="#video" class="btn btn-default btn-lg">Check out Here ! </a></p> 
     </div> 
    </div> 
    <!-- col --> 
    <hr> 
    <div class="row"> 
     <div class="col-md-12"> 
      <img src="img/bigimage2.png" class="img-responsive center-block" alt="tv"> 
     </div> 
    </div> 
    <hr> 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <p> &nbsp; </p> 
      <p> &nbsp;</p> 
      <p> &nbsp; </p> 
      <h2 class="text-center">Mixes Wine and Air to provide a optimum Wine flavour and mouthfeel Video</h2> 

     </div> 
     <p class=""></p> 
     <div class="col-md-6"> 
      <div id="video" class="vid"> 
       <iframe width="450" height="280" src="https://www.youtube.com/embed/e0mM42ZduTQ" allowfullscreen=""></iframe> 
      </div> <!-- vid --> 

     </div> 
     <!--.col --> 

    </div> 
</div> 

Answer 1

すると、あなたはこれをページの一番下に移動することができ、そして、あなたのビデオが中心になることを行う方法：id='anchor'であなたのa要素

へ

$("#anchor").click(function() { 
     $("#video").animate({ scrollTop: $(document).height() }, "slow"); 

    });​ 

Answer 2

ページ内で少しスクロールしすぎるような感じは、ナビバーの高さから来ています。私は単純にアンカーとして<hr />タグの前の要素を選択します。 （あなたの<p>タグはここでは便利ですが、<p>タグをスペーサーとして使用しないでください。希望のスペース効果を得るためのCSSクラスを作り、そのクラスのアンカータグを<div>に入れてください）

Answer 3

id = "anchor"をページ上の上位の別の要素に配置することは、きれいな解決策ではありません。あなたのライブサイトで、「ここを見る」をクリックすると、ビデオの配置はまだ中央にはなりません（あなたのビデオはまだ見えますが）。

このような美学に関心があるなら、アンカーの配置に頼ることは決してうまくいかないでしょう。

その他の戦略：

1 - より良いレイアウト美学を提供し、ウェブサイトのテーマを検索します。通常、このようなテーマでは、レスポンシブなCSSとJavascriptの組み合わせを使用してコンテンツを広げ、うまく中心を置いたり、物事をうまくアニメートしたりします。あなたは、このような種類の特質を持つ多くの「1ページ」のテーマを見つけるでしょう。 Here's an example。伝統的なHTMLアンカーリンクは、巨大なテキスト文書を簡単にナビゲートするためのものです。

2 - ページを背景に灰色で表示しながら、ページ全体の上部に正常に表示されるモーダルで動画を配置することを検討します。 this tutorialのように。