Question

我有一个表格，其中包含一个包含选择输入的表格。目前，选择输入位于单元格的顶部。我希望选择输入垂直居中。此表单是在rails中生成的，但生成的HTML和CSS与任何其他HTML / CSS表单相同。

呈现HTML

<table class="table table-bordered" id="business_contacts">
    <thead>
        <tr>
            <th>Title*</th>
            <th>First Name*</th>
            <th>Last Name*</th>
            <th>Ownership*</th>
            <th>Position*</th>
            <th>Employee*</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr class="fields" style="display: none;"> 
            <td>
                <select id="loan_application_business_contacts_attributes_1421767669447_prefix" name="loan_application[business_contacts_attributes][1421767669447][prefix]>
                    <option disabled="disabled" selected="selected" value=""></option>
                    <option value="Mr.">Mr.</option>
                    <option value="Mrs.">Mrs.</option>
                    <option value="Ms.">Ms.</option>
                    <option value="Dr.">Dr.</option>
                    <option value="Prof.">Prof.</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>

CSS（不工作）

#business_contacts select {
  display:inline-block;
  vertical-align:middle;
}

Answer 1

您需要使用td而不是选择元素本身对齐它：

#business_contacts td {
  display:inline-block;
  vertical-align:middle;
}

在表格单元格中垂直居中选择输入

1 个答案: