一行只能使用css以特定文本為中心嗎？

Question

我想有php生成的導航欄。 它將包含一個左側，其中包含指向當前目錄下方目錄的鏈接列表，一個指向當前目錄索引的鏈接，右側包含指向當前目錄內直接目錄的鏈接列表。

tester1> tester2 | 指數| tester4a tester4b

無論左側或右側的長度如何，我都希望將此導航欄置於“索引”周圍。 我知道我可以在生成它的php中將數組填充到相同的長度，但我對是否可以用html和/或css執行此操作感興趣。

Answer 1

或者你可以嘗試假裝“浮動：中心”

Answer 2

實際上很容易。 您可能需要使用寬度來適應您的上下文，但非常直接。

<div class="main">
  <div class="left">
    stuff in here
  </div>
  <div class="center>
    INDEX
  </div>
  <div class="right">
    stuff in here too
  </div>
</div>

CSS：

.main {
  width: 410px;
  text-align: center;
}

.main > div {
  display: inline-block;
}

.left {
  width: 175px;
  text-align: right;
}

.center {
  width: 50px;
  text-align: center;
}

.right {
  width: 175px;
  text-align: left;
}

.main > div > * {
  display: inline;
}

這里提琴