垂直对齐引导导航栏答案

【问题标题】：Vertical align bootstrap navbar垂直对齐引导导航栏
【发布时间】：2012-08-16 22:43:40
【问题描述】：

我在这篇文章Modify twitter bootstrap navbar 上找到了一种在引导程序中水平对齐导航栏的方法@

然后我尝试让它垂直对齐并且它可以工作，除了 top:30% 被忽略为 nav-collapse 有一个 style="height: 0px;

有没有人对使用不同于 top:30% 的东西有任何建议

HTML >

<div class="navbar space-top-page center">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand"></a>
      <div class="nav-collapse center collapse" style="height: 0px; ">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

CSS >

.center.navbar .nav/*, .center.navbar .nav > li*/ {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
position:absolute;
top:30%;
left:40%;
  }

 .center .navbar-inner {
text-align:center;
}

.center.nav-collapse { position:relative ; }

【问题讨论】：

我似乎看不出问题出在哪里。我没有通过 booply 看到任何问题 - bootply.com/63436

标签： html css twitter-bootstrap

【解决方案1】：

使用占位符元素：

/* Provide explicit height to prop up the page */

html, body  { height: 95%; }

/* Provide explicit height to prop up the container and content */
#container, span.placeholder { height: 100%; }

/* Use inline-block to make height usable by inline elements */
#content, span.placeholder { display: inline-block; vertical-align: middle; }

<div id="container">
      <span id="content">
      hi
      </span> 
      <span class="placeholder"></span>
</div>

它反映了内容的对齐方式以进行流畅的垂直对齐。

参考文献

【讨论】：