html - 填充两个静态大小的 div 之间的空间

Question

我有一个包含 3 个内部 div 的 div 元素(1200px 宽度)。
第一个和最后一个具有静态大小(150px 和 200px)。我希望第二个位于 Logo 和按钮之间。问题是我不知道如何将这个 div...

居中

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  width: auto;
  float: left;
}
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}

<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

Answer 1

一种方法是将 .text 元素的 display 设置为 inline-block (并删除 float: left )，然后将 text-align: center 添加到父元素以使其居中。由于其他元素是 float 的，text-align 不会影响它们，它只会使内联 .text 元素居中。

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
  text-align: center;
}
.logo {
  width: 150px;
  height: 50px;
  float: left;
  background-color: darkred;
}
.text {
  display: inline-block;
}
.buttons {
  width: 200px;
  height: 70px;
  float: right;
  background-color: darkgreen;
}

<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>

---

或者，您也可以将 margin: auto 添加到 .text 元素，然后在父元素上设置 display: flex。这样做时，.text 元素将水平居中，每边的间距相等。这样做时，您也不需要 float 元素(因为它们是 flexbox 元素)。

.container {
  width: 1200px;
  height: 100px;
  position: absolute;
  margin: 0 auto;
  background-color: grey;
  display: flex;
}
.logo {
  width: 150px;
  height: 50px;
  background-color: darkred;
}
.text {
  margin: auto;
}
.buttons {
  width: 200px;
  height: 70px;
  background-color: darkgreen;
}

<div class="container">
  <div class="logo"></div>
  <div class="text">SOME CENTERED TEXT HERE</div>
  <div class="buttons"></div>
</div>