Center Bootstrap navbar title - html

Question

I'm looking for handle my Bootstrap navbar title and I don't overcome to center my tag.
My script for this part looks like :
<style>
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: inline-block;
text-align:center;
float: none;
vertical-align: top;
}
</style>
<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<a class="navbar-brand"> Choix du logiciel </a>
</div>
</div>
</div>
</div>
</nav>
I would like to center : Choix du logiciel
I already read this post : Center content in responsive bootstrap navbar
But I don't find a way to make what I want :/
I think that it's not hard, but up to now it's not a success.
Thank you

Answer 1

EDIT : It should work with this fiddle
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: block;
text-align:center;
float: none;
vertical-align: top;
}
.navbar.navbar-inverse .navbar-header{
float: none;
}

Answer 2

Use this css:
.navbar.navbar-inverse .navbar-header {
text-align: center;
width: 100%;
}
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: inline-block;
float: none;
}

Answer 3

Change inline block to just block.
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: block;
text-align: center;
float: none;
vertical-align: top;
}

Answer 4

take text-align: center; out from your css .navbar.navbar-inverse.navbar-header.navbar-brand {..} and move it to
.navbar-header {
text-align: center;
}
will fix it.
.navbar.navbar-inverse.navbar-header.navbar-brand {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-header {
text-align: center;
}
.bg-red {
background-color: red;
}
.bg-yellow {
background-color: yellow;
}
<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<div class="wraper">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="navbar-header bg-yellow">
<a class="navbar-brand bg-red"> Choix du logiciel </a>
</div>
</div>
</div>
</div>
</nav>
</div>

Answer 5

Just put text-align:center on .navbar-header. It must work.
Your a tag must be display block so your text inside tag can be centered.
You can put display:block on a tag too.

Answer 6

Adding display:inline-block to .navbar-brand may fix it.
And also text-align:center to .navbar-header

Answer 7

Check this and see please
.navbar.navbar-inverse .navbar-header .navbar-brand {
display: block;
text-align: center;
float: none;
vertical-align: top;
}

Answer 8

This is now possible with inbuilt bootstrap class '.justify-content-center', but will be applicable on bootstrap versions v4.4 and above
Can be applied to a nav component like below
<nav className="navbar navbar-light bg-light justify-content-center">
<span className="navbar-brand mb-0 h1">Navbar</span>
</nav>