html - 如何使输入框垂直居中对齐？

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

给你。

WORKING DEMO

CSS 变化:

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

header {
    display: table;
}

希望这对您有所帮助。