divと入力を垂直方向に整列する

Question

時間をかけて正しい結果を得ようとしたら、ついにdivを2行整列させる方法を見つけましたが、今はボタンと入力ボックスを整列しようとしています彼らはちょうど少しオフです。注：私はこれとブートストラップを使用しています！

ここに私のコードです：

HTML：

<input id="col1" type="text" class="form-control" placeholder="Enter activity" /><button id="col2" class="btn btn-outline-success my-2 my-sm-0" type = "button">Add</button> 

はCSS：

body { 
    margin: 10px; 
} 

#col1 { 
    display: inline-block; 
    width: 70%; 
    height: 100px; 

} 

#col2 { 
    display: inline-block; 
    width: 30%; 
    height: 100px; 

} 

button, input { 
    height: 100%; 
    width: 100%; 
    line-height: 0; 
    border: 0; 
} 

http://jsfiddle.net/x1hphsvb/335/

何か助けていただければ幸いです！

Answer 1

ちょうどボタンのCSSにvertical-align: baseline;を追加します。 （ブートストラップのボタンのデフォルトの垂直方向の配置を「中」である）：

http://jsfiddle.net/q3aarre2/1/

Answer 2

あなたはゼロにするには、いくつかのより多くの特性を有する：

button, input { 
    ... 
    border: 0; 
    line-height: 0; 
    vertical-align: top; /* or 'middle'; for Bootstrap */ 
} 

Demo

Answer 3

私の親愛なる友人、あなたはそれを行う

input, button { 
    vertical-align:middle; 
}