Html 页脚问题

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

位置：绝对
左：50%
左边距：-宽度的1/2。

这是可行的，但当我使用

position:absolute

时，我的页脚好像突然看不到内容并向上浮动。我试着用这个， 但这对我不起作用。以下是一个链接，指向未删除粘性页脚和自动居中的页面：

任何帮助都将不胜感激

---

我没有使用JavaScript或jQuery的经验，因此请尝试将答案限制为CSS、HTML。

设置

位置：绝对值将从文档流中删除该元素。因此，它将不再向下推您的页脚。

我成功地使用了下面的CSS。

请注意，
div.span8
有几个级联定义。确保删除所有浮动和宽度设置。实际上，我刚刚从
div
中删除了整个
span8
类

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;*/
}

例如：

编辑：

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

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

<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>

正如hustlerinc所提到的，由于OP尝试使用引导响应，因此最好使用引导类而不是
width:800px
。但是，由于bootstrap的
.span
类包括
float:left
，因此您还需要设置
float:none
使用bootstrap的原因是您不需要所有凌乱的css，请充分利用它

编辑：我仔细查看了您的代码，这是您的解决方案。
将
更改为
，它将完全居中


要点：

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

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

<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>



要点：

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

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

<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>



要点：

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

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

<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>

你能发布我们的css和html或者类似JSFIDLE的东西来告诉我们这个问题吗..你想要什么内容<代码>div.span8

？我不知道怎么做。我应该使用哪部分代码？尝试使用css自动居中页面

.selector{margin:0 auto；}

但是不要忘记给它

宽度

->->

.selector{width:80%；}

*sample#howitworkscontent是我希望居中的内容。这将使文本居中，但似乎不会使

div

元素居中。这取决于您将其放置在何处，与网站的层次结构有关。我没有仔细查看他的代码，但我想应该这样做，然后是其他div中不继承文本中心的文本。我们讨论的是将

居中，而不是

中的文本。而只是

内联
元素。除非在目标
div
上设置
display:inline
，否则其父对象上的
text align:center
将不会使其居中。
offset2
类也没有将其居中：
.offset2{margin left:230px；}
showdev，非常感谢。它工作得很好。这也适用于其他页面？是的，如果您使用此处所示的相同概念。但是，请记住，div的类为
span8
，这可能是有原因的。我对bootstrap不是很熟悉，所以请确保您知道自己在更改什么。