在Bootstrap導航欄中居中我的文本

我正在使用Bootstrap創建導航欄，但文本駐留在左側。我簡直無法弄清楚如何讓文本位於導航欄的中心，並在調整大小並在不同設備上查看網站時停留在那裏。我嘗試繞過浮動：左;與下面的代碼，但我仍然無法弄清楚。在Bootstrap導航欄中居中我的文本

body { 
 
    font-family: century gothic; 
 
} 
 

 
.nav { 
 
    display: inline-block; 
 
    float: none; 
 
} 
 

 
.li { 
 
    text-align: center; 
 
} 
 

 
.footer { 
 
    background-color: #263238; 
 
    height: 5%; 
 
} 
 

 
.footer-text { 
 
    color: white; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    margin-top: 12px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>My Website</title> 
 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
     <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    </head> 
 
    <body> 
 
     <nav class="navbar navbar-default"> 
 
     <div class="container-fluid-nav"> 
 
     <div> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">CSGO</a> 
 
       </li> 
 
       <li><a href="#">ARMA III</a> 
 
       </li> 
 
       <li><a href="#">PUBG</a> 
 
       </li> 
 
       <li><a href="#">Other</a> 
 
       </li> 
 
       <li><a href="#">About</a> 
 
       </li> 
 
       <li><a href="#">External Links</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div class="footer navbar-fixed-bottom"> 
 
     <p class="footer-text">Copyright 2017 ©</p> 
 
     </div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="script.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     <script src="js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

如果它盯着我直的臉很新的這個東西非常抱歉。

謝謝。

來源

2017-08-15 H Smith

添加text-center類 <div class="container-fluid-nav text-center">

來源

2017-08-15 10:45:30 Sangsom

非常感謝！還有一件事，是否可以使內容跨越導航欄的整個寬度？ –

這會幫助你的。在我看來，你正在使用Bootstrap Navbar錯誤。您錯過了主要的類和層次結構。請通過bootstrap navbar文檔。 https://getbootstrap.com/docs/3.3/components/#navbar

.container-fluid-nav div{ 
    display: flex; 
justify-content: space-around;}

添加到您的CSS，並根據需要它應該工作。

來源

2017-08-15 10:45:47 Aslam

您尚未關閉標籤<nav>，而您的目標是.li，這是您沒有的，這就是爲什麼它沒有居中。

你可以這樣做：

body { 
 
    font-family: century gothic; 
 
} 
 

 
ul li { 
 
    text-align: center; 
 
    list-style: none; 
 
} 
 

 
.footer { 
 
    background-color: #263238; 
 
    height: 5%; 
 
} 
 

 
.footer-text { 
 
    color: white; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    margin-top: 12px; 
 
}

<body> 
 
     <nav class="navbar navbar-default"> 
 
     <div class="container-fluid-nav text-center"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">CSGO</a> 
 
       </li> 
 
       <li><a href="#">ARMA III</a> 
 
       </li> 
 
       <li><a href="#">PUBG</a> 
 
       </li> 
 
       <li><a href="#">Other</a> 
 
       </li> 
 
       <li><a href="#">About</a> 
 
       </li> 
 
       <li><a href="#">External Links</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
     <div class="footer navbar-fixed-bottom"> 
 
     <p class="footer-text">Copyright 2017 ©</p> 
 
     </div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="script.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     <script src="js/bootstrap.min.js"></script> 
 
    </body>

來源

2017-08-15 10:49:55 RasmusGlenvig

使用Flexbox的的菜單和頁面的中央。爲列表元素添加一點餘量。

body { 
 
    font-family: century gothic; 
 
} 
 

 
.nav { 
 
    display: flex; 
 
    justify-content: center; 
 
list-style: none; 
 
} 
 

 
li { 
 
    text-align: center; 
 
} 
 

 
li:not(:last-child) { 
 
margin-right: 1em; 
 
} 
 

 
.footer { 
 
    background-color: #263238; 
 
    height: 5%; 
 
} 
 

 
.footer-text { 
 
    color: white; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    margin-top: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid-nav"> 
 
    <div> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">CSGO</a> 
 
     </li> 
 
     <li><a href="#">ARMA III</a> 
 
     </li> 
 
     <li><a href="#">PUBG</a> 
 
     </li> 
 
     <li><a href="#">Other</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">External Links</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="footer navbar-fixed-bottom"> 
 
    <p class="footer-text">Copyright 2017 ©</p> 
 
    </div> 
 
</nav>

來源

2017-08-15 10:53:03 Gerard

在Bootstrap導航欄中居中我的文本

回答

相關問題