Question

我正在尝试将link1，link2水平和垂直居中。我得到了水平部分的工作，但无论我试图垂直没有任何变化。

Html代码：

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- <%= link_to 'Home', root_path %> -->
      </div>

      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <!-- <li><%= link_to 'Home', root_path %></li> -->
          <li>Link 1</li>
          <li>Link 2</li>
        </ul>
     </div>

  </div>
</nav>

Css代码：

.navbar .navbar-nav
  display: inline-block
  float: none
  vertical-align: middle

.navbar .navbar-collapse
  text-align: center

/* link */
.navbar-nav > li
  margin: 3px
  text-transform: uppercase
  font-weight: bold
  color: white

我如何让它工作？你认为我应该使用bootstrap或用css开发所有东西吗？

Answer 1

将此添加到您的css：

.navbar-nav {
    width: 100%;
    text-align: center;
  background: red;
}
.navbar-nav>li {
    float: initial;
  line-height: 150px;
}
.nav>li {
    display:inline-block;
}

line-height是li的高度，使它们位于区块的中心。希望这是你想要的东西。

这是bootply：http://www.bootply.com/1Tiu9JzEBN#

Answer 2

.navbar-nav>li {
    height: 100px;
    line-height: 100px;
    margin: auto;
    text-align :center;
}

.navbar-nav > li span {
    vertical-align: middle;
    display: inline-block;
    line-height: 1.2em;
}

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <!-- <li><%= link_to 'Home', root_path %></li> -->
          <li><span>Link 1</span></li>
          <li><span>Link 2</span></li>
        </ul>
     </div>

Bootstrap：导航栏中的中心项目

2 个答案: