Probleme beim Abrufen der vertikalen Ausrichtung in einem DIV

Question

Ich habe Probleme, Objekte in meinem DIV auf Mac Chrome vertikal auszurichten. Idealerweise würde ich das gerne mit Browsern machen, die auf dem Mac laufen, aber ich beginne mit Mac Chrome. Mein JSFiddle ist hier - https://jsfiddle.net/f77ajz4d/. Das ist mein HTML

<div id="search_form"> 

<form id="search-form" action="https://stackoverflow.com/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> 

und hier mein Stil ist

#search_form 
{ 
background-color:red; 
display:table-cell; 
text-align: center; 
vertical-align:middle; 
} 

Es ist keine Option, eine feste Höhe an den DIV zuzuweisen. Was vermisse ich, um meine Objekte vertikal auszurichten?

Answer 1

Sie können so etwas wie tun:

#search_form { 
 
    background: red; 
 
    padding: 5px; 
 
} 
 
input { 
 
    vertical-align: middle; 
 
}

<div id="search_form"> 
 
    <form id="search-form" action="https://stackoverflow.com/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>

Dies stellt sicher, dass alle input Elemente vertikal auf sie ausgerichtet ist, mit einer noch um sie herum Polsterung.