Html 将文本置于特定单词的中心

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

例如，假设我有以下

DIV

：

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

前一天|导航|第二天

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

---

我如何使中间部分位于“g”和“a”之间，而只使用（最好）CSS？修改HTML也是可以接受的。作为最后一种手段，我愿意使用JavaScript，尽管只有在保持简单的情况下，否则就不值得为这么简单的任务使用复杂的JavaScript。

您可以将单个项目包装在HTML标记中，就像锚一样，并浮动它们以实现所需的结果。浮动标记将它们并排放置，并为每个项目提供一个百分比宽度，该宽度加在一起可使元素在其容器中100%有效居中

注意，使用浮动存在一些陷阱。您需要在带有浮动子元素的容器后面正确地布局元素。此外，如果子元素有任何填充，这将添加到百分比宽度中，并使子元素未对齐，除非使用

框大小：边框框

HTML

这些颜色表示它位于其父元素的中心

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

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


前一天
|航行|
第二天

小提琴。
我认为这可能是字体系列的问题。如果使用其他字体族类型，可能会看到不同的结果。@KheemaPandey与此无关。因为“上一个”比“下一个”长，仅此而已。如果你改变字体，它仍然会是一个较长的单词。如果你真的需要将这3个单词居中，为什么不使用
ul
和
li
，而对于
|
你可以使用：伪类。最简单的方法是将单词包装在不同的div中。“前一天”div向左对齐，“第二天”向右对齐，“导航”居中对齐。此链接对您有帮助吗。非常令人印象深刻，我喜欢这个简单。这似乎是一个有用的技术，我在未来使用太多！就像在
内联块
元素之间意外出现的空白一样
.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%;
}

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