2

我有以下 HTML 代码，其中每个场景 div 都是固定宽度并向左浮动。
无论屏幕尺寸如何，我都希望整个.section_2块在视口内居中：

<div id="wrapper">
  <div id="scroller">
    <section class="section_2">
      <div class="scene2B1" data-stellar-ratio="1.1"></div>
      <div class="scene2B2" data-stellar-ratio="1.4"></div>
      <div class="scene2B3" data-stellar-ratio="1.3"></div>
      <div class="scene2B4" data-stellar-ratio="1.5"></div>
      <div class="scene2B5" data-stellar-ratio="1.2"></div>
    </section>
4

3 回答 3

2

CSS。

.section_2 { margin: 0 auto; width: 800px; }

注意：您必须设置宽度。

于 2012-10-04T14:38:10.710 回答
1

如果要将 div#wrapper 设置为将自身定位在视口的中心，请务必执行以下操作之一：

  1. 知道 div#wrapper 的确切宽度和高度是多少
  2. 使用javascript根据用户视口动态修改div#wrapper的高度和宽度

我会给你选项 #1 的示例代码（选项 #2 是相同的，只是添加了 javascript 以动态调整 div#wrapper 的大小）

HTML：

<body>
  <div id="wrapper">
    <div id="scroller">
      <section class="section_2">
        <div class="scene2B1" data-stellar-ratio="1.1"></div>
        <div class="scene2B2" data-stellar-ratio="1.4"></div>
        <div class="scene2B3" data-stellar-ratio="1.3"></div>
        <div class="scene2B4" data-stellar-ratio="1.5"></div>
        <div class="scene2B5" data-stellar-ratio="1.2"></div>
      </section>
    </div>
  </div>
</body>

CSS：

div#wrapper {
  width: 300px; /* Must define this */
  height: 300px; /* Must define this */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px /* This is HALF of the height times -1 */
  margin-left: -150px /* This is HALF of the width times -1 */
}
于 2012-10-05T01:49:51.197 回答
0

大多数时候@SMacFadyen 给出的方式会起作用，但如果它不起作用（而且我不知道为什么有时不起作用），你可以尝试：

    .section_2 {
         margin-left:400px;/* half the width*/
         left:-50%;
         width: 800px;
    }

与其他答案一样，您必须设置宽度。它似乎确实有点像黑客，但它对我有用。

演示：http: //jsfiddle.net/jdwire/EfSBA/1/z

要将其居中在整个视口中而不是仅在父元素中，您可以尝试：

     position:fixed;

但这可能会产生一些微妙的副作用，因此请确保它是您想要的

于 2012-10-05T01:27:26.663 回答