0
我试图在div引导程序容器中垂直居中文本。这是我的示例HTML文件：如何在引导程序容器中垂直居中文本
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.vcenter {
display: inline-block;
vertical-align: middle;
float:none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default vcenter ">
<ul class="list-inline vcenter" >
<li class="menuFont"><a href="/">Menu 1</a></li>
<li class="menuFont "><a href="/Menu 2">Menu 2</a></li>
<li class="menuFont "><a href="/Menu 2">Menu 3</a></li>
<li class="menuFont "><a href="/Menu 2">Menu 4</a></li>
<li class="menuFont "><a href="/Menu 2">Menu 5</a></li>
<li class="menuFont "><a href="/Menu 2">Menu 6</a></li>
<li class="menuFont "><a href="/Menu 2">Menu 7</a></li>
</ul>
</nav>
</div>
</body>
</html>
我想菜单文本垂直集中在容器内，但他们都抱着顶部。我将如何做到这一点？
我从事这个昨晚，这就是我想出了：
我用引导的目标，是有一系列的跨页水平运行菜单链接。由于某种原因，无疑由于我的无知，这证明相当困难。我确实想出了一个解决方案。至少这似乎工作，好的。但是，为了使水平菜单项在容器中垂直居中显示，我必须将margin-top：3px添加到类视图。这对我来说有点虚假，但我猜，无论什么作品都有效。任何意见都表示赞赏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<style>
.view {
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-top: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="Jumbotron">
<h1 class="text-primary text-center">Using Bookstreap.js</h1>
<hr>
</div>
<nav class="navbar navbar-default view ">
<div class="container-fluid view">
<div class="row">
<div class="col-lg-10 col-lg-offset-10 view" >
<ul class="list-inline view" >
<li class="view"><a href="/">Menu 1</a></li>
<li class="view"><a href="/Menu1">Menu 1</a></li>
<li class="view"><a href="/Menu1">Menu 2</a></li></li>
<li class="view"><a href="/Menu1">Menu 3</a></li>
<li class="view"><a href="/Menu1">Menu 4</a></li>
<li class="view"><a href="/Menu1">Menu 5</a></li>
<li class="view"><a href="/Menu1">Menu 6</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div>
你想要的文字进行垂直居中的导航？或导航垂直居中集装箱？ – Shank
我希望文本在导航中垂直居中。 – Ron
如果您只是想将链接垂直居中，请将'ul'从'list-inline vcenter'更改为默认类'nav navbar-nav'。请参见[Navbar]（https://getbootstrap.com/components/#navbar-default）。 – vanburen