Search code examples
htmlcssalignmentvertical-alignment

Button not aligned with input (due to padding of input)

The button below is not aligning with the input. The input has to be on the same height as the button, though the padding of the input seems to have a influence on the alignment! The difference between padding-top and padding-bottom creates this shift of the button.

I made a fiddle: http://jsfiddle.net/3RMhm/10/ to show what I mean.

CSS: 

.button {
    font-size: 15px;
    padding: 9px 23px;
    border:0;
}
.form  {
    width: 290px;
    background-color: #F9F9F9;
    font-size: 18px;
    color: #333;
    height: 25px;
    border:1px solid darkgray;
    padding-top: 15px;         <--- This padding
    padding-bottom: 0px;       <--- And this padding
}

HTML:

<input name="name" class="form" /> 
    <input class="button" type="submit">
Solution

  • Just add vertical-align: middle to both elements (button and input).

    http://jsfiddle.net/3RMhm/3/