Schaltfläche nicht mit dem Eingang ausgerichtet (aufgrund des Auffüllens des Eingangs)

Question

Die folgende Schaltfläche stimmt nicht mit dem Eingang überein. Der Eingang muss auf der gleichen Höhe wie die Taste sein, obwohl die Auffüllung des Eingangs einen Einfluss auf die Ausrichtung zu haben scheint! Der Unterschied zwischen padding-top und padding-bottom erzeugt diese Verschiebung der Schaltfläche.

Ich machte eine Geige: http://jsfiddle.net/3RMhm/10/ um zu zeigen, was ich meine.

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"> 

Answer 1

Fügen Sie einfach vertical-align: middle auf beiden Elemente (Taste und Eingabe).

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

Answer 2

Verwendung:

vertical-align:middle; 
margin-top: -5px; 

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

Answer 3

In Ihrem .form Klasse, ändern Sie einfach padding-top und padding-bottom Werte:

.form { 

    padding-right: 4px; 
    padding-bottom: 8px; 

}