javascript - 如何水平居中内容而不重叠侧面的元素

Question

我正在尝试创建一个类似于 iOS 的 UINavigationBar 的 View 布局:

UINavigationBar 有一个位于屏幕中央的标题和两侧的可选导航项(按钮)。如果标题太宽无法放在中心，那么它将被推到一边以避免与导航项重叠。

在 没有 JavaScript 的情况下，单独使用 CSS 可以实现这样的布局吗？

这是一个 fiddle我创建了一些尝试来实现这种布局。

在上面的截图中，布局是通过在两侧 float 红色和蓝色按钮，并将黄色 div 的左右边距设置为 auto 来实现的。上面的第二行正是我想要的，但不幸的是我必须在黄色 div 上设置一个明确的宽度。

我也尝试过 flexbox，但它不允许我将黄色 div 相对于容器居中。

如果在这种情况下无法避免使用 JavaScript，那么实现它的最佳方式(与每个浏览器最兼容)是什么？

Answer 1

您可以使用 position: absolute 将 center div 恰好放在 row 的中间，而不管左右的位置如何。

此外，为 left 和 right 提供 position: relative 和更高的 z-index出现在 center 上方。

引用代码:

.row {
  border: 1px solid black;
  margin: 20px 0;
  padding: 5px 0;
  position: relative;
  height: 18px;
}

.left {
  float: left;
  background-color: red;
  width: 200px;
  position: relative;
  z-index: 2;
}

.right {
  float: right;
  background-color: cyan;
  position: relative;
  z-index: 2;
}

.center {
  margin: 0 auto;
  background-color: yellow;
  text-align: center;
  white-space: nowrap;
}

.absolute {
  position: absolute;
  left: 0;
  right: 0;
}

.zero {
  width: 0px;
}

@media only screen and (max-width: 565px) {
  .absolute {
    left: 200px;
    padding-left: 20px;
    text-align: left;
  }
}

<div class="row">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center">center center center</div>
</div>

<div class="row">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center absolute">center center center</div>
</div>

<div class="row">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center zero">center center center</div>
</div>