我有一个 Bootstrap 顶部导航栏，导航中心内的所有标签都很好，但是我有一个图像和一个切换开关，我似乎无法在导航中垂直居中。我尝试了很多不同的自定义 css，但没有任何运气。理想情况下，我想为此创建一个类，nav-center-ele。
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header nav-center-ele">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- THIS IMAGE WONT VERTICALLY CENTER -->
<img class="img-responsive nav-center-ele" src="./assets/img/Logo.png" alt="Logo" width="150" height="30">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#!/about">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-left">
<!--<li><a href="#!/home">home</a></li>-->
<li><a href="#!/foo">foo</a></li>
<li><a href="#!/bar">Bar</a></li>
<li>
<!-- Rounded switch wont center!! -->
<label class="switch">
<input type="checkbox" id="darkModeSlider">
<span class="slider round nav-center-ele"></span>
</label>
</li>
</ul>
</div>
</div>
</nav>
最佳答案
使用 navbar-text 类为其提供适当的垂直填充...
https://www.codeply.com/go/Z914uQtCSE
<ul class="nav navbar-nav navbar-left">
<!--<li><a href="#!/home">home</a></li>-->
<li><a href="#!/foo">foo</a></li>
<li><a href="#!/bar">Bar</a></li>
<li class="navbar-text">
<!-- Rounded switch wont center!! -->
<label class="switch">
<input type="checkbox" id="darkModeSlider">
<span class="slider round nav-center-ele"></span>
</label>
</li>
</ul>
关于html - 无法在 Bootstrap 导航中垂直居中非 anchor 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49161939/