居中固定宽度/带显示的液体 css 布局：表格属性和最小/最大宽度答案

【问题标题】：Center fixed width/liquid css layout with display: table attribute and min/max widths居中固定宽度/带显示的液体 css 布局：表格属性和最小/最大宽度
【发布时间】：2013-04-13 08:42:11
【问题描述】：

我们的目标是使这个布局在屏幕上居中。我的最小宽度为 600 像素，最大宽度为 1200 像素，因此布局周围可能有很多空白。

我尝试了很多不同的方法，但对 display:table 属性以及它在这种情况下的行为方式感到困惑。

这里是 jsFiddle 和代码：http://jsfiddle.net/7M9rg/6/

非常感谢您对此的任何建议！

HTML：

<div id="wrapper">
<div id="header">
</div>

<div id="main">

<div id="side">
<div id="side-stuff">
<ul>
<li><a href="../English/index.html">Home</a></li>
</ul>
</div>
</div>

<div id="content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has</p>
</div>
</div>

<div id="footer">&copy; 2013 </div>
</div>

CSS：

/*css reset*/
html,body {position:relative;margin:0;padding:0;min-height:100%;width:100%;
height:100%;}
div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
textarea,p,blockquote,th,td, figure {margin:0;padding:0;}
ol,ul {list-style:none;}
li {list-style-type: none;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:
border-box; }


html, body {
font-family: Helvetica;
height: 100%; /*important for equal height columns*/
min-width: 650px;
}

#wrapper{
height: 100%; /*important for equal height columns*/
padding-bottom:130px; /*This must equal the height of your header*/}

#header{
height: 130px; /*This must equal padding bottom of wrap*/
display:block;
padding: 5px;
color: #fff;
border: thin solid #ebebeb;
border-radius: 10px;
margin: 10px;
background-image: url(Images/gradient.png);
background-repeat: repeat-x;    
width: 99%;}

#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 99%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 50px; /*This needs to match footer height*/
overflow: auto;
margin-left: 10px;}

#side{
background-color: #fff;
width: 150px;
margin: 10px;
vertical-align: top;
padding-top: 20px;
padding-right: 10px;
display: table-cell;
border-radius: 10px;
border: thin solid #CCC;}

#side-stuff{
display: block;
padding-left: 10px;}

#content{
background-color: #fff;
padding: 10px;
display: table-cell; /*To make sibling columns equal in height*/
margin-bottom:10px;
border-radius: 10px;
border: thin solid #CCC;}

#content-stuff{
width: auto;
height: auto;}

#footer{
position: relative;
height: 40px;
margin-top: -40px; /* margin-top is negative value of height */
margin-left: 10px;
clear: both; /* Use if floating elements */
color: #999;
width: 99%;
border: thin solid #ebebeb;
border-radius: 10px;
background-image: url(Images/footer_gradient.png);
background-repeat: repeat-x;
background-position: bottom;}

【问题讨论】：

标签： css layout

【解决方案1】：

将此添加到您的#wrapper CSS：

max-width: 1200px;
margin: 0 auto;

http://jsfiddle.net/tshz6/

【讨论】：

非常感谢您的回复。是的，我先这样做了，但对我来说它没有用。我很难过它似乎可以在 jsFiddle 中工作，但当我在浏览器中测试它时却不行。嗯...

【解决方案2】：

您需要为<body> 或#wrapper 元素指定宽度。 min-width 只指定了它可以缩小到的最小宽度，而width 和max-width 设置为auto，这是所有可用宽度（在本例中为屏幕宽度）。尝试更新您的html, body 规则以遵循

html, body {
  font-family: Helvetica;
  height: 100%;
  margin: 0 auto;
  min-width: 650px;
  max-width: 1200px;
}

【讨论】：

感谢您的快速回复。我已经尝试按照您的示例中指定的方式设置边距，但由于某种原因并没有这样做。我不确定我是否理解您关于指定宽度的评论（我无法使用半液体布局）；我应该做些什么吗？
I have a min-width of 600px and max-width of 1200px, so there is potentially a lot of white space around the layout. 如果我理解正确，您希望您的页面宽度在650px and 1200px 之间，具体取决于用户的屏幕分辨率。答案中的 CSS 设置 max-width 使其不会比 1200px 和 margin: 0 auto 居中更宽。试试这个 jsfiddle jsfiddle.net/7M9rg/8
顺便说一句，Try updating your html, body rule to following 我的意思是替换 reset rules 之后的 html, body 规则
Ejay，我很抱歉，由于某种原因，最大宽度没有进入代码，但我一直都有它。我确实添加了边距：0 auto;但它仍然没有以我为中心。我又做了一个 jsFiddle，但它也不在那里工作，所以代码中的某些东西肯定已经改变，现在正在干扰。你介意看看吗？ jsfiddle.net/eJyD2谢谢！！！
您在color:#333 之后缺少;，这导致margin: 0 auto 无法生效