在 DIV 中无法使垂直对齐正常工作

Question

我在 Mac Chrome 上的 DIV 中让项目垂直对齐时遇到问题。理想情况下，我想让它在 Mac 上运行的浏览器上运行，但我将从 Mac Chrome 开始。我的 JSFiddle 在这里 - https://jsfiddle.net/f77ajz4d/ 。这是我的 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>

这是我的风格

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

无法为 DIV 分配固定高度。鉴于此，为了使我的项目垂直对齐，我缺少什么？

Answer 1

您可以这样做：

#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>

这可确保所有 input 元素彼此垂直对齐，并在它们周围均匀填充。

在 DIV 中无法使垂直对齐正常工作

Having trouble getting vertical alignment to work in a DIV

html

css

vertical-alignment