围绕特定字母居中文本

Question

我正试图在我的导航栏（使用 bootstrap）中居中放置一个句子。目前的导航栏如下所示：
Centered Navbar title
我想做的是有“|”居中，旁边是它周围的文本，而不是仅仅让句子居中。这很难解释，但我希望你明白我的意思——“|”居中，文本向左和向右，而不是整个句子居中，中间字母在中间。我想要“|”在中间。
我试过将“|”居中并将左侧的文本浮动到右侧，右侧的文本浮动到左侧，但这只是使文本完全向右移动，而不是在“|”之前停止。
使用代码片段查看代码，但请使用 "Full Page" 以使其正常工作...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>
    <?php echo $album_nm; ?>
  </title>

  <!-- Bootstrap Core CSS -->
  <link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
  <!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ -->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;">
    <div class="container" style="text-align: center;">
      <div class="container" class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        <div style="font-family: font71888;" class="navbar-brand page-scroll" href="#page-top">
          <div style="display:inline-block; text-align: right;">
            CHLOE
          </div>
          <div style="display:inline-block; float: none; margin: 0 auto;">
            |
          </div>
          <div style="display:inline-block; text-align: left;">
            <?php echo $album_nm; ?>
          </div>
        </div>
        <!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> -->
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav" style="align: center; float: center; text-align: center;">
          <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
          <li class="hidden">
            <a class="page-scroll" href="#page-top"></a>
          </li>
          <li>
            <a class="page-scroll" href="#buy">Buy</a>
          </li>
          <li>
            <a class="page-scroll" href="#story">My Story</a>
          </li>
          <li>
            <a class="page-scroll" href="#about">About Me</a>
          </li>
          <li>
            <a class="page-scroll" href="#warchild">War Child</a>
          </li>
          <li>
            <a class="page-scroll" href="#listen">Listen</a>
          </li>
          <li>
            <a class="page-scroll" href="#thanks">Thanks</a>
          </li>
          <li>
            <a class="page-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>
</body>

</html>

编辑：

感谢 Andrei Gheorghiu 的回答，这对我有用而且看起来非常好！我已将他的答案标记为正确，这是目前投票最多的答案...

Answer 1

这里。

注意：如果您不想在文本居中时计算移动菜单按钮，只需从包裹文本的 div 中删除 overflow: hidden 属性

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>
    <?php echo $album_nm; ?>
  </title>

  <!-- Bootstrap Core CSS -->
  <link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
  <!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ -->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;">
    <div class="container" style="text-align: center;">
      <div class="container" class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        <div style="font-family: font71888; float: none; overflow: hidden" class="navbar-brand page-scroll" href="#page-top">
          <div style="display:block; text-align: right; width: 50%">
            CHLOE |
          </div>
          <div style="display:block; text-align: left; width: 50%" >
            <?php echo $album_nm; ?>
          </div>
        </div>
        <!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> -->
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav" style="align: center; float: center; text-align: center;">
          <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
          <li class="hidden">
            <a class="page-scroll" href="#page-top"></a>
          </li>
          <li>
            <a class="page-scroll" href="#buy">Buy</a>
          </li>
          <li>
            <a class="page-scroll" href="#story">My Story</a>
          </li>
          <li>
            <a class="page-scroll" href="#about">About Me</a>
          </li>
          <li>
            <a class="page-scroll" href="#warchild">War Child</a>
          </li>
          <li>
            <a class="page-scroll" href="#listen">Listen</a>
          </li>
          <li>
            <a class="page-scroll" href="#thanks">Thanks</a>
          </li>
          <li>
            <a class="page-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>
</body>

</html>

Answer 2

这是我的做法：

.navbar-brand {
  display: flex;
}
.navbar-brand > div{
  flex: 1 1 0;
  padding: 0 4px;
}
.navbar-brand > div:first-child,
.navbar-brand > div:last-child{
  flex-basis: 50%;
}
.navbar-brand > div:first-child {
  text-align: right;
}

<div class="navbar-brand page-scroll" href="#page-top">
  <div>CHLOE</div>
  <div>|</div>
  <div>This is a long album name</div>
</div>

P.S.: 在部署之前不要忘记 autoprefix 你的 CSS。
并停止使用内联 style！如果声明是内联的，您将如何在 @media 查询中包装它们？

围绕特定字母居中文本

Center text around a certain letter

html

css

centering

navbar

twitter-bootstrap

编辑：