Center Bootstrap navbar title

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

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 3

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 4

Change inline block to just block.

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

Answer 5

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

Answer 6

Check this and see please

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

Answer 7

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>

Answer 8

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.