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 is the key here, but it's getting overridden by the font declaration below, so you could change that to:

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