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

Question

^^^

由于动画的css导航按钮，这并没有解决我的问题我的情况不同。可以这样工作：display：table-cell和vertical-align：middle;等

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

因为我要使标题在高度上响应，所以导航按钮始终居中垂直是更好的。现在它位于中心，上边距为20px，因为按钮的高度为20px，标题为60px，它居中，但如果标题高度响应变化则不会起作用。

--> FIDDLE

代码：

<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;        
}