css - 包装表内的居中表单元格 - 3 列，流体布局

Question

我第三次尝试根据 Stack Overflow 成员的更多建议重新编码我的网站以获得响应式布局。这次我使用 display:table/display:table-cell 设置来居中页面包装器，其高度由内容和粘性页脚控制。

一位成员建议了一个可行的基本布局(谢谢!)但是如果我使用的宽度小于 100%，我就无法将内联包装器置于页面包装器的中心。它强制内联包装器位于页面包装器的右侧。

我试过边距、填充和文本对齐。我可能可以用“center”标签破解它，但我希望我的代码是语义化的。

这是我的代码的浓缩 View - 我不确定我是否做错了什么，缺少语法(我之前忘记了一个逗号，这让我花了 30 分钟的时间进行故障排除)，它需要 ie10 和 Opera 或其他任何东西的 hack .

<div id="page-wrapper>
 <div id="logo"><img /></div>
 <div id="inline-wrapper">
  <div id="top-content">
   <div id="left"><img /></div>
   <div id="center">content blah blah</div>
   <div id="right"><img /></div>
  </div>
  <div id="nav-menu"><ul><li><img /></li></ul></div>
  <div id="main-content">
   <div id="left"><img /></div>
   <div id="center">content blah blah</div>
   <div id="right"><img /></div>
  </div>
</div></div>
<div id="footer"></div>

html, body, #page-wrapper, #inline-wrapper, #top-content, #main-content {
      height:100%;
    width:100%;
    margin:auto;
}

#page-wrapper {
    height:100%;/* to show footer */
    width:70%;
    position:relative;
    display:table;
    table-layout:fixed;
    border:solid;
}
#logo {
    width:100%;
    top:.75%;
    z-index:99;
    position:absolute;
}
#logo > img {
    width:100%;
}
#inline-wrapper {
    position:relative;
    display:table-cell; <-- /* I removed this */
    width:90%;
    margin:auto;
    background-color:#fff;
    padding-bottom:1%;
}

#top-content, #main-content {
     display:table;
     width:98%;
     border-collapse:collapse;
}
#top-content {
     height:60%;
}

#right, #left, #center {
    display:table-cell;
}

#left {
    background-color:#CC0000;
    width:14%;
}

#left img {
    width:100%;
    height:100%;
}

#right {
    background:#0600ff;
    width:14%;
}

#center {   
    width:72%;
    background:#ccc;
}

#nav-menu {
    width:100%;
    margin:0 auto;
    text-align:center;  
}

#nav-menu li {
    color:#fff;
    margin:auto;
    display:inline-block;
    background-color:#000000;
    list-style-position:inside;
    border:1% solid #ffffff;
    padding:.75%;
    width:12.5%;
    height:31%;
    vertical-align:top;
}

#nav-menu li:hover {
    opacity: .55;
  filter: alpha(opacity=55);
}

#nav-menu li img {
    height:100%;
    width:100%;
}

#footer {
  width:100%;
  height:250px;
  background-color:#000;
  border-top:solid;
}

Answer 1

尝试关闭此处的 ID:<div id="page-wrapper> .将其更改为:< div id="page-wrapper">