垂直对齐div和输入

Question

After trying to get it right for hours I've finally found a way to align two div s perfectly on one line, but now I'm trying to get a button and an input box aligned and they're just slightly off. Note: I'm using Bootstrap with this!

Here's my code:

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/

Any help is appreciated!

Answer 1

You have a few more properties to zero out:

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

Demo

Answer 2

Just add vertical-align: baseline; to the button's CSS. (The default vertical alignment for buttons in bootstrap is "middle"):

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

Answer 3

My dear friend, you just do it

input, button {
   vertical-align:middle;
}