html - 将 相对于容器 div 居中，将另一个 span 与其左侧的右对齐文本对齐

Question

我试图在容器 div 的中心对齐一个 span 元素，并让另一个 span 文本右对齐左对齐:

+--------------------------------------------------------+
| <div>                                                  |
+----------------------+----------+                      |
| <span>               | <span>   |                      |
|                      |          |                      |
|                      |          |                      |
|                      |          |                      |
|        right-aligned | centered |                      |
|                      |          |                      |
|                      |          |                      |
|                      |          |                      |
|                      |          |                      |
+----------------------+----------+                      |
|                                                        |
+--------------------------------------------------------+

两个跨度的内容都是动态生成的，所以我想尽可能避免任何绝对像素宽度。

知道如何实现这种布局吗？

这是我最终根据 Persinj 的回答使用的标记:

HTML

<nav class="navbar">
  <span class="nav-aside">Right-aligned:&nbsp;</span>
  <span class="nav-menu">centered</span>
  <span class="nav-aside"></span>
</nav>

CSS

nav.navbar {
  display: flex;
}
span.nav-aside {
  flex-grow: 1;
  flex-basis: 0;
  text-align: right;
}
span.nav-menu {
  align-self: center;
  text-align: center;
}

由于我对浏览器的要求有限，所以我将供应商前缀排除在我的标记之外，并且我依靠 autoprefixer 来处理这个问题。如果需要，请查看已接受的答案。

Answer 1

Flexbox 设计/布局

这可以使用 flex 解决:

设置树框:旁边，中心和一个隐藏的，将填充所需的空间。
设置 flex-grow 将使它们占据页面的不同部分。
对每个设置 flex-grow: 1; 将使它们占用相同的空间。将其中之一设置为 flex-grow: 0.5；会给这部分更少的成长空间。
添加具有 flex 属性的包装器，我们可以使用 align-items:center 来确保它们位于包装器的中心。

Fiddle

.wrapper {
  height: 250px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  text-align: center;
}

.center,
.aside,
.not-shown {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.center {
  flex-grow: 0.5;
  background-color: lightblue;
  height: 50px;
}

.aside {
  text-align: right;
  background-color: 1;
  background: lightgreen;
  height: 50px;
}

.not-shown {
  visibility: hidden;
  flex-grow: 1.5;
  height: 50px;
}

<div class="wrapper">
  <div class="aside">
    aside
  </div>
  <div class="center">
    center
  </div>
  <div class="not-shown">
  </div>
</div>