Question

当我在看看这里！按钮时，我很无聊它不完全在屏幕中间

我想将该视频部分对齐在屏幕中间请帮助我！该怎么做

<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

放置id =＆＃34;锚点＃34;在页面上的另一个元素上不是一个非常干净的解决方案。在您的实际网站上，当我点击＆＃34;在此处查看＆＃34;时，视频的展示位置仍然没有＃34;居中＆＃34; （虽然我仍然可以看到你的视频）。

归根结底，如果你关注这种美学，依靠锚定位置永远不会好。

其他策略：

1 - 找到一个网站主题，提供更好的布局美学。通常这样的主题将使用响应式CSS和Javascript的组合来传播内容，很好地居中，甚至可以很好地制作动画。你会发现很多＆＃34;一页＆＃34;主题有这些特征。 Here's an example。传统的HTML锚链接更适合轻松导航巨型文本文档。

2 - 调查将视频放置在模式中，这些模式优雅地显示在整个页面的顶部，页面在背景中变暗。与this tutorial一样。

当我尝试使用锚点和ID滚动页面时，它不能正常工作

2 个答案: