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

时间:2014-02-02 03:03:51

标签: php html css

我想拥有php生成的导航栏。它将包含一个左侧,其中包含指向当前目录下方目录的链接列表,一个指向当前目录索引的链接,右侧包含指向当前目录内直接目录的链接列表。

  

tester1> tester2 |指数| tester4a tester4b

无论左侧或右侧的长度如何,我都希望将此导航栏置于“索引”周围。我知道我可以在生成它的php中将数组填充到相同的长度,但我对是否可以使用html和/或css执行此操作感兴趣。

2 个答案:

答案 0 :(得分:1)

或者您可以尝试faking "float:center"

答案 1 :(得分: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