html - 围绕特定单词居中文本

Question

在 CSS 中，如何使文本围绕特定单词居中？

例如，假设我有以下 DIV:

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

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

我怎样才能使中间部分位于“g”和“a”之间，(最好)仅使用 CSS？修改 HTML 也是可以接受的。作为最后的手段，我愿意使用 JavaScript，尽管前提是它要保持简单，否则不值得为这样一个简单的任务使用复杂的 JavaScript。

Answer 1

固定包含“Previous Day”和“Next Day”的元素的宽度可能是最简单的解决方案:

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

fiddle here .