<span>相對於容器div</span>居中<span>，將另一個跨度與其左對齊的文本對齊</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;
}

由於瀏覽器要求有限，我沒有在標記中添加供應商前綴，並且我依靠自動前綴程序來解決此問題。 如果需要，請查看已接受的答案。

Answer 1

Flexbox設計/布局

可以使用flex來簡化它：

設置樹框：在旁邊，中間和一個隱藏的樹框將填充所需的空間。
設置flex-grow將使它們占據頁面的不同部分。
設置flex-grow: 1; 在每個將使他們占據相等的空間。 將其中之一設置為flex-grow: 0.5 ； 將使該部分的生長空間減少。
添加一個帶有flex屬性的包裝器，我們可以使用align-items:center來確保它們位於包裝器的中心。

小提琴

 .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> 

Answer 2

HTML：

<div class="wrapper">
  <span class="span-left">right-aligned</span>
  <span class="span-center">centered</span>
</div>

CSS：

.span-left, .span-center { display: inline-block; }

.span-left {
  width: 40%;
  text-align: right;
}

.span-center {
  width: 20%;
  text-align: center;
}

或者，使用display: block和float: left; 在您的跨度上（不要忘記在包裝后清除）。