header 中的垂直对齐导航 icon/button

Question

^^^

这不能解决我的问题我的情况不同，因为动画 css 导航按钮。可以让它像这样工作： display: table-cell and vertical-align: middle;等等

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

因为我要使 header 高度响应，所以导航按钮始终垂直居中。现在它被放置在中心，上边距为 20px，因为按钮的高度是 20px 而 header 是 60px 它居中，但是如果 header 高度响应地变化，那将不起作用.

代码：

<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

你可以这样试 DEMO 刚刚更改了保证金值

CSS:

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

Answer 2

如果您可以将它的父位置设置为 relative 那么您也许可以使用

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

在按钮上

header 中的垂直对齐导航 icon/button

Vertical align navigation icon/button in header

html

css

center

vertical-alignment