Question

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

例如，假设我有以下DIV：

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

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

如何使用（最好）仅使用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>

小提琴here。

Answer 2

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

注意，使用浮点数存在一些缺陷。您需要clear the parent div在带有浮动子项的容器之后正确布置元素。此外，如果子元素有任何填充，除非您在子元素上使用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%;
}

颜色表明它以其父元素为中心。

Here's a live demo jsFiddle

围绕特定单词的中心文本

2 个答案: