如何在引导容器中垂直居中放置文本

Question

I'm trying to center text vertically within a div bootstrap container. 我正在尝试在div引导程序容器中垂直居中放置文本。 This is my sample HTML file: 这是我的示例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>

I would like the menu text centered vertically within the container, but they are hugging the top. 我希望菜单文本在容器内垂直居中，但它们在顶部。 How would I do this? 我该怎么做？

I worked on this last night and this is what I came up with: 我昨晚做了这个，这是我想出的：

My goal using Bootstrap, was to have a series of menu links running horizontally across the page. 我使用Bootstrap的目标是使一系列菜单链接在页面上水平运行。 For some reason, doubtless due to my ignorance, this proved rather difficult. 由于某种原因，毫无疑问，由于我的无知，这被证明是相当困难的。 I did come up with a solution. 我确实提出了一个解决方案。 At least this seems to work, OK. 至少这似乎可行，好。 HOWEVER, in order to make the horizontal menu items appear vertically centered within the container, I had to add margin-top: 3px to the class view. 但是，为了使水平菜单项在容器内垂直居中，我必须在类视图中添加margin-top：3px。 This feels kind of fake to me, but whatever works works, I guess. 对我来说，这感觉有些虚假，但是我想，不管行得通。 Any comments are appreciated. 任何意见表示赞赏。

<!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>

Answer 1

<!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>
{ 
 display: inline-block;
 vertical-align: middle;
 float:none;



}
</style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default vcenter "  >
      <div class="container-fluid vcenter">
        <div class="col-lg-5 col-lg-offset-5" >
    <ul class="list-inline vcenter" >

    <div>

   <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>
  <div>
  </ul>
  </div>


</div>
</nav>
</div>
 </body>
</html>

如何在引导容器中垂直居中放置文本

问题描述

1 个解决方案

解决方案1
0 2016-07-29 18:46:19

如何在引导容器中垂直居中放置文本

问题描述

1 个解决方案

解决方案1 0 2016-07-29 18:46:19

解决方案1
0 2016-07-29 18:46:19