Question

我找到了一种在此帖子Modify twitter bootstrap navbar

上水平对齐导航栏中导航栏的方法

然后我试图让它垂直对齐，除顶部外它起作用：30％被忽略了 nav-collapse有一个style =“height：0px;

有没有人对使用与top不同的东西有任何建议：30％

HTML＆gt;

<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＆gt;

.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 ; }

Answer 1

使用占位符元素：

＆＃13;

/* 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; }

＆＃13;

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

＆＃13;

反映内容的对齐以进行流体垂直对齐。

<强>参考

垂直对齐引导导航栏

1 个答案: