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

【问题标题】：Vertical align navigation icon/button in header标题中的垂直对齐导航图标/按钮
【发布时间】：2015-04-20 14:00:53
【问题描述】：

^^^

这并不能解决我的问题，我的情况有所不同，因为动画 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>

【问题讨论】：

vertical alignment of elements in a div的可能重复
我看到了，但无法让它在我的情况下工作。你知道吗？
如果您使用当前的 CSS 进行演示，我们或许可以提供建议。
这是我当前的 css 演示。问题很简单：我不想像现在这样垂直居中，但我想从字面上做到这一点，所以它会随着不同的标题高度而变化。
对于这里的大多数编码人员来说，没人能帮我吗？

标签： html css center vertical-alignment

【解决方案1】：

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

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

在按钮上

【讨论】：

我在这里没有提供太多细节，所以我希望我的答案很快就会被那些愿意添加更多单词和华丽布局的人窃取。
谢谢伙计，这成功了：.nav-btn { display: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); background-color: transparent; }

【解决方案2】：

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

CSS：

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

【讨论】：

不，这不是我的意思，在我的示例中导航图标/按钮已经垂直居中，并且上边距为 20px，因为 nav-btn= 20px 高度和 header= 60px，但我想用不同的断点改变标题高度我需要图标在字面上居中而不是像我现在所做的那样。