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

您可以执行以下操作：

＆＃13;

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

＆＃13;

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

＆＃13;

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

无法在DIV中进行垂直对齐

1 个答案: