Question

大家好，感谢您的投入。

我看了很多模板但是没有觉得我找到了一种在单页面布局上呈现“部分”的垂直居中内容的简洁方法。我指的是这里的整个区域空间，而不是指其中的元素。

期望的效果是一次将可查看内容限制为部分，并使用滚动条移动到单页面上的下一部分......使用easing.js很容易。

因此，对于伪标记，会有类似

的内容

<section id="topic1"
    <random element>
    <random element>
</section>

... Some space added to ensure no overlap of sections are viewed here ...
... e.g. margin-top: 100px or 10%

<section id="topic2"
    <random element>
    <random element>
    <random element>
    <random element>
</section>

... Some space added ...
... e.g. margin-top: 100px

...etc

当浏览器移动到每个部分（通过锚点）时，每个部分都会显示“空白空间”并且它会产生很好的效果。我们面临的挑战是，当我们以“响应式”方式更改设备时，始终将这些部分垂直居中。我还发现了一些与Internet Explorer不一致的问题。可以理解的是，在某些屏幕尺寸（例如桌面横向高度和手机）上，这变得不可能，并且需要滚动。

任何关于CSS方法的干净利落的想法都会受到赞赏。

Answer 1

您可以使用换行并使用css属性display:table和display:table-cell以及vertical-align:middle

来执行此操作

带有所需包装的HTML标记：

<section id="topic1">
    <div class="wrap">
        <div> aaaa</div>
        <div> aaaa</div>
    </div>
</section>

需要css：

section{
    display:table;
    height:220px;
    background: #ccc;
    width:100%;
}
.wrap{
    display:table-cell;
    vertical-align:middle;
}

Living demo

使用line-height是一种更简单的方法，但您需要知道该部分的height。

您可以找到更多关于如何完成它的方法here。

Answer 2

有几种不同的方法可以使用Bootstrap标记来实现您的目标。这是一个例子：

.space {
  padding-bottom: 200px;
}

<section class="container space">
  <div id="scroll-to" class="row">
    <div class="col-xs-6 col-xs-offset-3">
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
    </div>
  </div>
</section>
<section class="container space">
  <div id="scroll-to" class="row">
    <div class="col-xs-6 col-xs-offset-3">
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
      <p class="text-center"><a href="#">Random Elements</a></p>
    </div>
  </div>
</section>

我会尝试专注于偏移类，并考虑使用.center-block和.center-text。中心块将对齐元素中心，中心文本将对文本执行相同操作。这将使您免于膨胀您的CSS并保持一切可预测的响应式设计。

希望这有帮助。

HTML5 Bootstrap单页 - Vert Centering <section>的</section>

2 个答案: