我正试图在我的导航栏（使用引导程序）中居中。到目前为止，导航栏看起来像这样：
Centered Navbar title
我想做的是拥有“|”居中，旁边有文字，而不只是让句子居中。这很难解释，但我希望你理解我的意思 - “|”是居中的，左右两边都有文字，而不是整个中心位于中间，中间字母位于中间。我想要“|”在中间。
我试过以“|”为中心并将文本左侧向右侧浮动，文本向左侧浮动，但只是使文本完全向右移动而不是在“|”之前停止。
使用代码段查看代码，但请使用“完整页面”以使其正常运行...
<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的答案，这对我有用，看起来非常好！我已经将他的答案标记为正确，并且是目前评价最多的人......
答案 0 :(得分：4)
我是这样做的：
.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查询中包装你的声明？
答案 1 :(得分：0)
下面。
注意：如果您不想在居中文本时计算移动菜单按钮，只需从包含文本的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>