在引导导航栏中居中我的文本[重复]
我正在使用引导创建导航栏，但文本位于左侧。我根本不知道如何让文本位于导航栏的中心，并在不同设备上调整大小和查看站点时保持在那里。我试过绕过浮动：左；使用下面的代码，但我仍然无法理解。
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>这东西很新鲜，如果它直视着我很抱歉。
谢谢。
共有3个答案
将flexbox用于菜单和页面中心。为列表元素添加一点边距。
css prettyprint-override">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>
添加文本中心类
这应该对你有所帮助。在我看来，您使用引导Navbar是错误的。您缺少主类和层次结构。请浏览引导导航栏文档。https://getbootstrap.com/docs/3.3/components/#navbar
.container-fluid-nav div{
display: flex;
justify-content: space-around;}
将此添加到您的css，它应该可以根据需要工作。
-
我想创建一个居中的引导导航栏与标志。我是这样看的： 我怎样才能做到这一点呢？
-
navbar的当前外观： 我希望它看起来像这样： 文本对齐：居中不起作用。也不证明、浮动等。 HTML CSS
-
我试图将导航栏项目水平居中对齐，但它们向左对齐。 有人能帮忙吗？ 这是一个桌面问题-只是要明确，我有这个问题在桌面级别。 这是我目前的代码： 演示：https://jsfiddle.net/cjoasysz/
-
我现在有一段html，它代表我的导航栏的相关部分： 我有一个css，我希望用它来改变导航栏的文本颜色： 唯一的问题是文本颜色保持不变。我还看到一个非常相似的问题没有解决。我打赌谁能解决这个问题，谁就能解决另一个问题。
-
问题内容： 无论我尝试什么，我都无法在Bootstrap导航栏中放置任何内容，对此有什么解决方案？ 我试过使用或使用的类添加div 。什么都行不通，为什么要实现如此简单，我无法理解的东西这么难，我在做什么错呢？ 这是当前代码： 问题答案： 在Bootstrap 4中，有一个名为的新实用程序。您只需要指定居中元素的宽度。 与Bass Jobsen的答案不同，后者是两端元素的相对中心，以下示例为绝对中
-
如何使引导程序的输入文本框居中？