php - 一行可以仅使用 css 以特定文本为中心吗？

Question

我想让 php 生成导航栏。它将由左侧和当前目录下方目录的链接列表、当前目录索引的链接和右侧和当前目录直接内部目录的链接列表组成。

tester1 > tester2 | index | tester4a tester4b

我想将这个导航栏围绕“索引”居中，无论左侧或右侧的长度如何。我知道我可以在生成它的 php 中将数组填充为相等的长度，但我想知道我是否可以使用 html 和/或 css 做到这一点。

Answer 1

其实很容易。您可能需要调整宽度以适应您的上下文，但非常简单。

<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;
}

Fiddle HERE