Z-index object center alignment

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;
}

I have two input types and I want the submit button to be behind the text input and to be centered on the y axis respectively to the first object (text input). I can't manage to center it correctly. I can do it by adjusting margins but then I get different result in every browser and so it's not exactly in the center.

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

Answer 1

To vertically center an absolutely positioned element with known height inside it's parent container is an easy task and guaranteed to work cross browser:

.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 */
}

Make sure you add position: relative to your form so that it becomes the context for your submit button. See the fiddle:

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

Answer 2

I think you want align the divs on y axis. If you have width of the both input boxes predetermined, just use position absolute for both and give left and top on both the divs.

See the fiddle

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;
}

• put position relative on the parent div to start a new BFC. (the children are absolute wrt the div)