私はBootstrapを初めて使い、navbarを水平と垂直の両方にセンタリングしようとしていますので、
のように見えますが、わかりません。あなたは.navbar-navとliクラス（ほとんどの場合、あなた'LLにこれらのルールを適用する必要がリンクを中央にしたい場合はブートストラップのNavbarを水平方向と垂直方向に合わせる
nav {
color: #fff;
height: 112px;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}
：
<html>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#pages">Pages</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#mega-menu">Mega menu</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
とCSS：ここ
は、HTMLですこれらもメディア・クエリーの中に入れておきたい）。
中心のリンクCSS
@media (min-width: 768px) {
.navbar.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
.navbar.navbar-default .navbar-nav > li {
display: inline-block;
float: none
}
}
そして、あなたは彼らが垂直に整列しているので、あなたのリンクの高さを調整するためにline-heightを使用することができます。
垂直リンク配置
@media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li > a {
line-height: 4;
}
}
実施例：
.navbar.navbar-default {
background: white;
border: 1px solid transparent
}
.navbar.navbar-default .navbar-nav.navbar-center > li > a,
.navbar.navbar-default .navbar-search > li > a {
color: #266080;
}
@media (max-width: 767px) {
.navbar.navbar-default {
padding: 15px 0;
}
.navbar.navbar-default .navbar-collapse {
margin-top: 15px;
margin-bottom: -15px;
border: 0;
box-shadow: none;
}
}
@media (min-width: 768px) {
.navbar.navbar-default {} .navbar.navbar-default .navbar-nav.navbar-center {
width: 100%;
text-align: center;
}
.navbar.navbar-default .navbar-nav.navbar-center > li {
display: inline-block;
float: none
}
.navbar.navbar-default .navbar-nav.navbar-center > li > a {
line-height: 4;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
.navbar.navbar-default .navbar-search {
position: absolute;
right: 2%;
top: 17px;
line-height: 4;
font-size: 20px;
}
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav navbar-center">
<li class="active"><a href="#home">Home</a>
</li>
<li><a href="#portfolio">Portfolio</a>
</li>
<li><a href="#blog">Blog</a>
</li>
<li><a href="#pages">Pages</a>
</li>
<li><a href="#features">Features</a>
</li>
<li><a href="#mega-menu">Mega menu</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-search">
<li><a href="#"><span class="glyphicon glyphicon-search"></span> </a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>