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