垂直对齐输入元素

问题描述

我对下面的代码有点麻烦。我有一个绝对定位的div，其中我有3个元素：1文本输入，1密码和包含图像的按钮。标记如下：

I'm having a bit of trouble with the following code. I have an absolutely positioned div, inside of which I have 3 elements: 1 text input, 1 password and a button containing an image. The markup is as follows:

<div id="credentials">
            <input type="text" id="username" />
            <input type="password" id="password" />
            <button type="submit" id="login"><img src="./img/login.png" alt="Submit" /></button>
</div>

和CSS：

div#credentials
{
    position: absolute;
    right: 5px;
    top: 10px;
    background-color: #494949;
}

#username
{
    font-family: 'Lucida Sans', Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #AAA;
    padding: 3px;
    margin: 0px;
}

#password
{
    font-size: 8pt;
    color: #AAA;
    padding: 3px;
    margin: 0px;
}

#login
{   background: transparent;
    border: 0px;
    padding: 3px;
    cursor: pointer;
}

看起来两个第一个元素位于div的底部，并且按钮位于顶部。我想垂直对齐所有3个元素在中间的div，但在尝试了一些不同的填充/边距组合后，无法找到任何看起来可以跨浏览器显示。

It looks as though the two first elements are situated at bottom of the div, and the button is situated at the top. I'd like to vertically align all 3 elements in the middle of the div, but after trying a number of different padding/margin combinations couldn't find anything that looks presentable across browsers. Does anyone have any experience with this issue?

推荐答案

尝试vertical-align属性

Try the vertical-align property

input, button {
    vertical-align:middle;
}

这篇关于垂直对齐输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！