Question

我在使用以下代码时遇到了一些麻烦。我有一个绝对定位的div，其中我有3个元素：1个文本输入，1个密码和一个包含图像的按钮。标记如下：

<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的底部，而按钮位于顶部。我想垂直对齐div中间的所有3个元素，但在尝试了许多不同的填充/边距组合后，找不到任何看起来在浏览器中可见的内容。有没有人有过这个问题的经验？

Answer 1

尝试使用vertical-align属性

input, button {
    vertical-align:middle;
}

Answer 2

Align vertically input elements in div

处display: list-item;的垂直布局良好

使用vertical-align: …;

在Chrome / FireFox / Opera / Safari中运气不佳

垂直对齐输入元素

2 个答案: