Question

我有一个带有徽标的导航栏，可在用户向下滚动时调整大小这也会调整导航栏的大小，使其更短。

无论导航栏的高度如何，如何让折叠按钮（＃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％的父母身上，并将其高度的一半减少到完全垂直对齐到中心。

身高20px的例子：

CSS

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

垂直居中导航栏折叠按钮

1 个答案: