Vertical align bootstrap navbar

Question

I found a way to horizontally align the navbar in bootstrap on this post Modify twitter bootstrap navbar

I then tried to get it to vertically align and it works except the top:30% is ignored as the nav-collapse has a style="height: 0px;

does anyone have any suggestions on using something different than 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 ; }

I can't seem to see where the problem lies. I don't see any issue through booply - http://bootply.com/63436 — rivarolle, Jun 06 '13 at 20:18

score 0 · Answer 1 · edited May 23 '17 at 12:13

Use a placeholder element:

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

which mirrors the alignment of the content to do fluid vertical alignment.

References

Vertical align bootstrap navbar

1 Answers1