一行只能使用css以特定文本为中心吗？

Question

I want to have php generated navigation bar. It will consist of a left side with a list of links to the directories below the current one, a link to the index of the current directory, and the right side with a list of links to directories directly inside the current one.

tester1 > tester2 | index | tester4a tester4b

I would like to center this navigation bar around 'index', regardless of the length of the left or right. I know I could pad the arrays to equal length within the php that generates it, but I'm interested in whether or not I could do this with html and/or css.

Answer 1

Pretty easily actually. You may need to play with the widths to fit your context, but pretty straight forward.

<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