在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导航栏中居中我的文本

回答

相关问题