以特定词为中心的文字

Question

在CSS中，如何将文字围绕特定的单词？

例如，假设我有以下DIV ：

<div style="text-align: center;">
  Previous Day | Navigation | Next Day
</div>

从技术上讲，文本将居中，但“导航”一词将不在中间。 相反，中间将恰好在字母“ v”和“ i”之间。 这是因为在将文本居中时，会考虑整个字符串的长度。

我如何只使用CSS（最好是使用CSS）使中间出现在“ g”和“ a”之间？ 修改HTML也可以接受。 作为最后的选择，我愿意使用JavaScript，尽管只有将其保持简单即可，否则不建议将复杂的JavaScript用于如此简单的任务。

Answer 1

固定包含“上一天”和“下一天”的元素的宽度可能是最简单的解决方案：

<div style="text-align: center;">
    <div style="display: inline-block; width: 12em; text-align: right;">Previous Day</div>
    <div style="display: inline-block;"> | Navigation | </div>
    <div style="display: inline-block; width: 12em; text-align: left;">Next Day</div>
</div>

在这里摆弄。

Answer 2

您可以将单个项目包装在HTML标记（例如锚）中，然后将其浮动以达到所需的结果。 浮动标签可将它们并排放置，并为每个项目提供一定百分比的宽度，这些宽度共同增加到100％，可以有效地将元素居中在容器中。

注意，使用浮点数有一些陷阱。 您需要清除父div才能正确放置带有浮动子项的容器之后的元素。 另外，如果子元素具有任何填充，除非您使用box-sizing: border-box;否则它将被添加到百分比宽度中并导致子元素未对齐box-sizing: border-box; 在子元素上。

HTML

<div class="container">
    <a href="#">Previous Day</a>
    <span class="separator">|</span>
    <a href="#">Navigation</a>
    <span class="separator">|</span>
    <a href="#">Next Day</a>
</div>

CSS

.container {
    color: white;
    margin: 0 auto;
    width: 80%;
    min-width: 320px;
    background-color: black;
    overflow: hidden; /* to clear the div */
}

.container a {
    text-align: center;
    float: left;
    width: 32%;
    overflow: hidden;
    background-color: orange;
}

.container .separator {
    float: left;
    text-align: center;
    padding: .5%;
}

颜色将显示它在其父元素中居中。

这是一个现场演示jsFiddle