jquery - 缩小时无法将内容居中

Question

我在网站的几乎每个元素上都使用绝对定位。它工作正常，但是我遇到的唯一问题是，当我缩小页脚时，页脚仍然很好地居中，但页眉（#header）和内容（#content）向左侧移动。我正在使用 margin:auto ，甚至尝试使用 Jquery 将它们都居中，但问题仍然存在。所以任何人都可以给我一个解决方案。我将感激不尽。

这是网站：http ://contestlancer.com/Trivia/

Answer 1

当我使用 firebug 检查您的网站时，它显示#logo,和有一个像素集。#navigation#righter#asidemargin-left: ...px

这意味着即使您缩小或放大，它们也总是有设置像素数量的左边距。尝试使用百分比代替。IE：

#righter {
   left: 40%;
}

Answer 2

通常我做什么，当有大量的乱码css和html混合时，我会用jquery强制它：

var w = $(window),
    el = $('#elementIwantToCenter');

//when first viewing the site => center el horizontally
el.css({position: 'absolute', left: (w.width()-parseFloat(el.css('width')))/2});

//when resizing browser window => center el horizontally
w.resize(function() {
  el.css({left: ($(this).width()-parseFloat(el.css('width')))/2});
});
w.trigger('resize');

示例：http: //jsfiddle.net/XSDM7/

Answer 3

您应该将具有 id “aside” 和 “righter” 的 div 放在包装器 div 中，并为包装器 div 提供自动边距。

<div style="margin-left:auto;margin-right:auto;width:1024px;" > 
   <div id="aside"> </div>    
   <div id="righter"> </div>   
</div>

Answer 4

使用时position:absolute，您基本上接管了对定位的完全控制，这使得布局成为一项大工作，因为您不会给浏览器留下任何东西。

• 使用position:relative而不是使用的position:absolute地方。
• 使用top:0px;' on both#content and#footer`。
• 使用 % 作为 和 中顶部的左边距和宽度#header，#content就像在#footer.

示例#content：

#aside
{
  top: 30px;
  float: left;
  display: inline;
  background-color: #F7B800;
  min-height: 500px;
  position: relative;
  border-radius: 9px;
  text-align: center;
  margin-left: 15%;
  left: 0;
  width: 30%;    
}

#righter {
  vertical-align: baseline;
  top: 0px;
  float: right;
  display: inline;
  left: 0px;
  position: relative;
  min-height: 550px;
  word-wrap: break-word;
  margin-right: 5%;
  width: 45%;
  margin-left: 5%;    
}

一件重要的事情是margin-left，margin-right和width两个部分加起来为 100%。