Having trouble getting vertical alignment to work in a DIV - html

Question

I'm having trouble getting items to vertically align in my DIV on Mac Chrome. Ideally I'd like to get this to work on browsers that run on Mac, but I'll start with Mac Chrome. My JSFiddle is here -- https://jsfiddle.net/f77ajz4d/ . This is my HTML
<div id="search_form">
<form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" placeholder="First Name">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
<input type="text" name="item" id="item" placeholder="Item">
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>
</div>
and here's my style
#search_form
{
background-color:red;
display:table-cell;
text-align: center;
vertical-align:middle;
}
It is not an option to assign a fixed height to the DIV. Given this, what am I missing in order to get my items to vertically align?

Answer 1

You can do something like:
#search_form {
background: red;
padding: 5px;
}
input {
vertical-align: middle;
}
<div id="search_form">
<form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get">
<input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" placeholder="First Name">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
<input type="text" name="item" id="item" placeholder="Item">
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>
</div>
This ensures that all input elements are vertically aligned to eachother, with an even padding around them.