Center Bootstrap navbar title

问题

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

回答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; 
}

回答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;
}

回答3:

Change inline block to just block.

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

回答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>

回答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.

回答6:

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

回答7:

Check this and see please

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

来源：https://stackoverflow.com/questions/43497560/center-bootstrap-navbar-title

标签

html

css

twitter-bootstrap