Center <a> element in navbar header parent - html

Question

Hello stackoverflow people, I need help with centering my Website Title, here is the print screen of website:
As you can see Website title is in the left of the navbar here is my html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--Mobilus buttonas-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Website title</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-left main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
</ul>
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li>Team</li>
<li>Pricing</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</div>
</div>
</nav>
I'am using bootstrap so there is no point posting css, so I will give you jsfiddle so it could be simplier: https://jsfiddle.net/fNPvf/18964/ . So i repeat, I don't know how to make Website Title in the center of website?

Answer 1

Try this:
.navbar-brand {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}

Answer 2

Build something like col5-col2-col5. You maybe have to adjust this for other resolutions. Centering stuff without flexbox is always a pain.
Like this:
<header id="header">
<!--Meniu laukas-->
<div class="menu_area">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-5">
<ul id="top-menu" class="nav navbar-nav navbar-left main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
</ul>
</div>
<div class="col-md-2">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website title</a>
</div>
</div>
<div class="col-md-5">
<ul id="top-menu" class="nav navbar-nav navbar-left main_nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</header>
https://jsfiddle.net/fNPvf/18972/

Answer 3

add the following class in your css
you may adjust this value for various media queries and add the class to the container check the following fiddle https://jsfiddle.net/fNPvf/18975/
.center-container{width:705px;}