I am attempting to align a phrase in the center of my navigation bar, which has been built using Bootstrap. Currently, the navbar appears as follows:
Centered Navbar title
My goal is to center the "|" symbol with the text adjacent to it on both sides, rather than simply centering the entire sentence. Essentially, I want the "|" to be precisely centered with text on either side, instead of having the middle letter in the center. I hope this explanation makes sense - I want the "|" to be at the midpoint.
I have attempted to center the "|" and utilize floating for the left text to move right and the right text to move left, but this resulted in the text shifting completely to the right rather than stopping before the "|".
Please use the snippet provided to view the code, ensuring you select "Full Page" for proper functionality...
<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>Edit:
Special thanks to Andrei Gheorghiu for providing a solution that worked smoothly and looked great! I have selected his answer as correct, as it currently has the most upvotes...