Center Bootstrap導航欄標題

我正在尋找處理我的Bootstrap navbar title，我沒有克服以居中標記。Center Bootstrap導航欄標題

我給這部分腳本如下所示：

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

我想中心：Choix du logiciel

我已經閱讀這篇文章：Center content in responsive bootstrap navbar

但我不t找到一種方法來做我想要的：/

我認爲這並不難，但到現在爲止它並不成功。

謝謝

來源

2017-04-19 Deadpool

所以你說，加入'文本對齊：中心;'到您的導航欄不工作的權利？ – Chirag

是的，當我寫下我的問題時，我忘記了這一行。我想以此爲中心，但現在沒有任何效果。 – Deadpool

編輯：它應與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; 
}

來源

2017-04-19 13:51:37

我沒有看到差異xD – Deadpool

我編輯過，它應該是';） – Deadpool

-1

只要把文本對齊工作：在.navbar頭中心。它必須工作。

您的標籤必須是顯示塊，以便標籤內的文本可以居中。

您也可以將display：block放在標籤上。

來源

2017-04-19 13:52:03

不，它不起作用^^ – Deadpool

採取text-align: center;從你的CSS .navbar.navbar-inverse.navbar-header.navbar-brand {..}並將其移動到

.navbar-header { 
    text-align: center; 
}

將修復它。

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

來源

2017-04-19 13:55:06

我有另一個CSS文件，這就是爲什麼一些答案沒有工作。現在可以用你的答案了:) – Deadpool

@Deadpool調試的好方法是在每個容器中放一些背景顏色，這樣你就可以看到每個塊。 = D –

我接受你的想法，下一次我會做這個過程:) – Deadpool

添加顯示：內聯塊到.navbar品牌可能修復它。而且還文本對齊：中心.navbar頭

來源

2017-04-19 13:59:24

使用這個CSS：

.navbar.navbar-inverse .navbar-header { 
    text-align: center; 
    width: 100%; 
} 

.navbar.navbar-inverse .navbar-header .navbar-brand { 
    display: inline-block; 
    float: none; 
}

來源

2017-04-19 13:59:26

謝謝你，你的解決方案也可以:) – Deadpool

更改內嵌塊只是阻止。

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

來源

2017-04-19 14:45:54

檢查並看到請

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

來源

2017-04-19 21:01:43

Center Bootstrap導航欄標題

回答

相關問題