twitter-bootstrap 在 Bootstrap 导航栏中居中我的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45691242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering my text in Bootstrap navbar
提问by
I am creating a navbar using Bootstrap but the text is stationed on the left. I simply cannot figure out how to get the text to be in the center of the navbar and stay there when resizing and viewing the site on different devices. I have tried bypassing the float: left; with the below code but I still can't figure it out.
我正在使用 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>Pretty new to this stuff so sorry if it's staring me straight in the face.
这个东西很新，如果它直视我，我很抱歉。
Thanks.
谢谢。
采纳答案by Sangsom
add text-centerclass to
<div class="container-fluid-nav text-center">
添加text-center类
<div class="container-fluid-nav text-center">
回答by Aslam
This should help you out. In my opinion, you are using Bootstrap Navbar wrong. You are missing the main classes and hierarchy. Please go through the bootstrap navbar docs. https://getbootstrap.com/docs/3.3/components/#navbar
这应该可以帮助你。在我看来，您使用 Bootstrap Navbar 是错误的。您缺少主要的类和层次结构。请阅读引导程序导航栏文档。https://getbootstrap.com/docs/3.3/components/#navbar
.container-fluid-nav div{
display: flex;
justify-content: space-around;}
Add this to your css and it should work as required.
将此添加到您的 css 中，它应该可以按要求工作。
回答by RasmusGlenvig
You are not closing tag <nav>and your are targeting a .liwhich you don't have, that's why it's not centered.
您不是关闭标签<nav>，而是针对您没有的标签.li，这就是它不居中的原因。
You can do like this:
你可以这样做：
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>回答by Gerard
Using flexbox for the menu and to center on the page. Adding a bit of margin for the list elements.
使用 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>