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

Question

inline-block, table-cell, line-height, etc. none of it affects the alignment of my text...

Demo: 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';
}

I've tested countless solutions and nothing matters; the alignment always remains as it looks now.

Answer 1

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

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