一行只能使用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;
}

这里提琴