html - 垂直居中导航栏折叠按钮

Question

我有一个带有 Logo 的导航栏，该 Logo 会随着用户向下滚动而调整大小。
这也会调整导航栏的大小，使其更短。

无论导航栏的高度如何，如何让折叠按钮 (#nav-btn) 垂直居中？

<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top">

    <button id="nav-btn" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation">
        <span id="hamburger-icon"class="navbar-toggler-icon"></span>
    </button>

    <div class="nav-container text-center">
        <a class="navbar-brand" href="#"><img id="navbar-logo" src="Images/logo.png" style="width:150px"></a>
    </div>
    <div class="collapse navbar-collapse" id="navbarDiv">                           
        <div>
            <ul class="navbar-nav mr-auto text-center">    
                <li class="nav-item">    
                    <a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a>   
                </li>  
                <li class="nav-item">    
                    <a class="nav-link" href="#about-us" >About</a>   
                </li>   
                <li class="nav-item">  
                    <a class="nav-link" href="#pricing" >Pricing</a>   
                </li>                                   
            </ul>
        </div>
    </div>                          
</nav>

CSS

/***** NAVBAR *****/


.navbar {
    font-size: 25px;
    padding: 5px;
    padding-left: 8vw;
    background-color: rgba(31, 31, 31, 0.5)
}

.nav-link {
    font-weight: 500;
}


#nav-btn {
    border: 1px solid white;
}

Answer 1

一种方法是提供 #nav-btn绝对位置。

因为它在 relative 中定位元素，它将相对于其父元素进行绝对定位。

现在你可以给它top: calc(50% - <half-of-it's-own-height>);它会将您的按钮定位在其父按钮的 50% 处，并将其高度降低一半以使其完全垂直居中对齐。

高度为 20 像素的示例:

CSS

#nav-btn {
  position: absolute;
  height: 20px;
  top: calc(50% - 10px);
}