html - 如何水平居中具有两个空 div 之间的主要内容的 div

Question

我有这样的东西:

#left,
#middle,
#right {
  float: left;
  display: inline;
}

#left,
#right {
  width: 20%;
  background-color: green;
}

#middle {
  width: 60%;
}

<div id="container">
  <div id="left">foo</div>
  <div id="middle">Main content goes here</div>
  <div id="right">bar</div>
</div>

只要 left 和 right div 有一些内容，它们就很好地夹在中间的 div 之间。

但是一旦我从 left 和 right div 中删除内容 foo 和/或 bar , middle div 停靠在左边，就好像左边的 div 从未存在过一样。

无论它们是否有任何内容，我如何让这三个 div 保留我分配给它们的百分比宽度？

Answer 1

使它们成为内联 block 而不是内联元素并清除 float

body {
  margin: 0;
}

#left,
#middle,
#right {
  display: inline-block;
}

#left,
#right {
  width: 20%;
  background-color: green;
}

#middle {
  width: 58%;
  background: #ddd;
}

<div id="container">
  <div id="left"></div>
  <div id="middle">Main content goes here</div>
  <div id="right"></div>
</div>

如果您不需要两侧的任何内容，这是另一个更简单的解决方案:

body {
  margin: 0;
}


#middle {
  width: 60%;
  background: #ddd;
  margin: 0 auto;
}

<div id="container">
  <div id="left"></div>
  <div id="middle">Main content goes here</div>
  <div id="right"></div>
</div>