标题中的垂直对齐导航图标/按钮

Question

^^^

这不能解决我的问题，因为动画的css导航按钮，我的情况有所不同。 可以像这样显示它：display：table-cell和vertical-align：middle; 等等

我有一个响应式标题，当处于移动尺寸时，该标题显示一个导航按钮，您可以在其中显示其余菜单项（在示例中为禁用，我的问题不需要它）。

因为我要使标题在高度上响应，所以最好不要将导航按钮始终居中放在垂直位置。 现在，它以20px的上边距放置在中心，并且由于按钮的高度为20px，标题的高度为60px，因此它居中，但是如果标题的高度响应地变化，该按钮将不起作用。

-> 场

码：

<header>
<nav>
    <div class="col-nav">
        <a href="#" class="nav-btn"><span class="nav-icon"></span></a>          
        <a href="#" class="home">Name</a>
    </div>
    <ul>
        <li class="col-nav"><a href="#">Item1</a></li>
        <li class="col-nav"><a href="#">Item2</a></li>
        <li class="col-nav"><a href="#">Item2</a></li>
    </ul>
</nav>
</header>

Answer 1

如果您可以将其父母的位置设置为relative位置，则可以使用

position: relative;
top: 50%;
transform: translateY(-50%);

在按钮上

Answer 2

您可以像这样尝试DEMO刚刚更改了保证金值

CSS：

.nav-icon {
    position: relative;
    margin-top: 7px;        
}