Question

#sidebar input[type=text], input[type=password] {
    margin-left: 13px; 
    height: 22px;
    width: 129px;
    border: none;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px;  
    background-color: #d9e4ea;
    font-size: 13px;
    position: relative;
    z-index: 2;
}

input[type=submit] {
    margin: 0;
    width: 101px;
    height: 16px;
    background: url(images/img06.png) no-repeat left top;
    border: none;
    position: absolute;
    z-index: 1;
    cursor:pointer;
}

我有两种输入类型，我希望提交按钮位于文本输入后面，并且分别以y轴为中心分别对应第一个对象（文本输入）。我无法正确地集中它。我可以通过调整边距来实现，但随后我在每个浏览器中得到不同的结果，因此它并不完全在中心。

http://jsfiddle.net/7hbq5/10/

Answer 1

要将具有已知高度的绝对定位元素垂直居中，它的父容器是一项简单的任务，并保证可以跨浏览器工作：

.centeredVertically {
 position: absolute; 
 height: 16px;
 top: 50%; /* push down by 50% of the height of the container */
 margin-top: -8px; /* bring it back up by half of it's height */
}

确保将position: relative添加到表单中，以便它成为提交按钮的上下文。看小提琴：

http://jsfiddle.net/7hbq5/11/

Answer 2

我想你想在y轴上对齐div。如果您预先确定了两个输入框的宽度，则只需对两者使用绝对位置，并在两个div上给出左侧和顶部。

看小提琴

http://jsfiddle.net/7hbq5/12/

input[type=password] {
    height: 22px;
    width: 129px;
    border: none;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px;  
    background-color: rgba(0,0,0,0.4);
    font-size: 13px;
    position: absolute;
    z-index: 2;
    top:0;
    left:0;    
}

input[type=submit] {
    position: absolute;
    left:14px;
    top:3px;
    width: 101px;
    height: 16px;
    border: none;
    -webkit-border-radius: 7px; 
    -moz-border-radius: 7px; 
    border-radius: 7px;  
    background-color: #ff672a;
    position: absolute;
    z-index: 1;
    cursor:pointer;
}

将位置相对设置在父div上以启动新的BFC。（孩子们绝对是div）

Z-index对象中心对齐

2 个答案: