文本不会垂直对齐内部Div无关紧要什么

Question

内联块，表格单元格，行高等等都没有影响我文本的对齐...

演示：http://colechrzan.com/tv_rewrite

HTML：

<div class="toolbar">
    <form>
        <div class="search">
            <input type="text">
            <div class="remove">Clear</div>
        </div>
    </form>
</div>

CSS：

.remove {
    background: #fff;
    display: inline-block;
    color: #1E1E20;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    left: calc(50% + 15px);
    height: 32px;
    padding: 0 4px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    font: 18px 'Open Sans';
}

我已经测试过无数的解决方案而且无关紧要;对齐始终保持原样。

Answer 1

line-height: 32px是这里的关键，但它被下面的字体声明覆盖，因此您可以将其更改为：

font: 18px/32px 'Open Sans';