html - 无论如何，文本都不会在 Div 内垂直对齐

Question

inline-block, table-cell, line-height, 等等，它们都不会影响我文本的对齐...

演示: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';