如何将输入字段垂直居中对齐？

Question

这是HTML：

<header>
    <div class="image">
        <img class="logo" src="https://www.gravatar.com/avatar/b637dcf2d1f68517a316c466585ea1a8?s=32&d=identicon&r=PG&f=1" />
    </div>
    <div class="form">
        <input type="text" class="input" name="location" id="location" />
    </div>
</header>

这是CSS：

.image {
    float:left;
}
img {
    width: 100px;
    height: 100px;
}
.form {
    vertical-align: middle;
}

这是jsfiddle链接： http ： //jsfiddle.net/NmP69/1/

Answer 1

干得好。

工作演示

CSS变更：

.form {
    vertical-align: middle;
    display:table-cell;
}

header {
    display: table;
}

希望这可以帮助。

Answer 2

其中一种可能的方法是在图像上使用位置绝对和负边距：

img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

在这里查看结果： http ： //jsfiddle.net/WHSKL/