0

我有一个页面，我想将其内容自动居中：

position: absolute 
left: 50%
margin-left: -1/2 of width.

这可行，但是当我使用position: absolute它时，就像我的页脚突然看不到内容并浮起来一样。我尝试使用这个粘性页脚，但它对我不起作用。这是一个没有移除粘滞页脚和自动中心的页面链接：http: //cashforcarsanywhere.com/how-it-works/

任何帮助，将不胜感激。

我没有使用 JavaScript 或 jQuery 的经验，所以请尽量限制对 CSS、HTML 的回答。

4

3 回答 3

1

#footer on page bottom

要点：

<div id="footer">
   <p>This is some #footer content</p>
</div>


#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  padding: 20px 15px;
  background:#bada55;
}

#footer on page bottom with Centered Content

要点：

<div id="footer">
  <div>
     <p>This is some Centered #footer content</p>
  </div>
</div>


#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  background:#bada55;
}

#footer > div{
  margin:0 auto;
  width: 600px;
  padding:20px 15px; /* padding here, now #footer is only a marionette :) */
  background:#cf5;
}

Example with page content

要点：

<div id="page">
  <p>This is some Centered #page content my 100px padding bottom will prevent the content to end up behing the #footer applying properly the vertical window scrollbars once I touch the very page bottom.</p>
</div>  

<div id="footer">
  <div>
     <p>This is some Centered #footer content</p>
  </div>
</div>


#page{
  margin: 0 auto;
  width:600px;
  padding:20px 15px 100px;
  background:#eee; /* BG is just for example, avoid BG on this element, rather create an inner one*/
}

#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  background:#bada55;
}

#footer > div{
  margin:0 auto;
  padding:20px 15px; /* padding here, now #footer is only a marionette :) */
  width: 600px;
  background:#cf5;
}
于 2013-06-28T17:05:28.623 回答
0

设置position:absolute将从文档流中删除该元素。因此，它不会再将您的页脚向下推。

我在下面的 CSS 上取得了成功。

请注意，您有多个div.span8. 请务必删除所有浮动和宽度设置。实际上，我只是从中删除了整个span8班级div。

div.span8 {
  // remove all float and width settings.
  // (I just removed the entire class "span8" from this `div`.)
}


#howitworkscontent {
  position: relative;
  width: 800px;
  padding: 15px auto;
  margin: 0px auto;
  /*float: left;*/
}

示例：http: //jsfiddle.net/5WFNW/

编辑：

正如 hustlerinc 所提到的，由于 OP 正在尝试使用引导响应，因此使用引导类而不是width:800px. 但是，由于引导程序的.span类包括float:left，您还需要设置float:none.

于 2013-06-28T16:50:30.353 回答
-1

使用 bootstrap 的原因是你不需要那些乱七八糟的 css，利用它来发挥你的优势。

编辑：我仔细查看了您的代码，这是您的解决方案。更改<div class="span8">为<div class="span8 offset2">，它将完全居中。

http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

于 2013-06-28T17:00:53.687 回答