1

我在这篇文章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 ; }
4

1 回答 1

0

使用占位符元素：

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

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

参考

于 2014-10-07T22:32:27.060 回答