以特定詞為中心的文字

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