垂直对齐div和输入

Question

在尝试了几个小时之后，我终于找到了将两个div完美地对齐在一条线上的方法，但现在我试图获得一个按钮和一个输入框对齐，他们只是略微偏离。注意：我正在使用Bootstrap！

这是我的代码：

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

你还有一些属性要归零：

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

<强> Demo

Answer 2

只需将vertical-align: baseline;添加到按钮的CSS即可。 （引导程序中按钮的默认垂直对齐方式是“中间”）：

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

Answer 3

亲爱的朋友，你就这么做了

input, button {
   vertical-align:middle;
}