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

时间:2014-02-10 12:28:25

标签: html css

这是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/

2 个答案:

答案 0 :(得分:2)

你走了。

<强> WORKING DEMO

CSS变更:

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

header {
    display: table;
}

希望这有帮助。

答案 1 :(得分:0)

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

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

在此处查看结果: http://jsfiddle.net/WHSKL/