如何使用 CSS 使文本居中，以便其中一個元素始終位於父元素的中心？

Question

我有一個元素，我想在其中顯示兩個團隊名稱，如下所示：Team1 與 Team2。 然而，當一支球隊的名字比另一支球隊的名字長得多時，vs. 就會偏離中心。

我怎樣才能實現“對”？ 零件始終保持死點並在其兩側緊挨着兩個元素 go？ 所有元素都是文本。

例子：

--------Team1-vs.-Team2--------
Team1Longname-vs.-Team2--------
--------Team1-vs.-Team2Longname

Answer 1

您可以使用 flexbox 並分配兩個團隊名稱flex: 1 。 然后在左邊給出團隊名稱text-align: right

 .wrapper { display: flex; }.wrapper.team { flex: 1; }.wrapper.vs { margin: 0 10px; }.wrapper.team:first-child { text-align: right; }

 <div class="wrapper"> <span class="team">Team 1</span> <span class="vs">vs.</span> <span class="team">Team 2</span> </div> <div class="wrapper"> <span class="team">Team 1</span> <span class="vs">vs.</span> <span class="team">Team 2 with A Long Name</span> </div> <div class="wrapper"> <span class="team">Team 1 with A Long Name</span> <span class="vs">vs.</span> <span class="team">Team 2</span> </div>