如何在 table (Bootstrap 4.0) 中水平和垂直居中此 select 框？

Question

我尝试使用 this 方法和许多其他方法来做到这一点，但没有成功：

<td class="align-middle">
    <select name="D1" style="border-radius: 0.2rem;">
      <option value="empty"></option>
      <option value="Approved">Approved</option>
      <option value="Discuss">Discuss</option>
      <option value="Rejected">Rejected</option>
    </select>
</td>

感谢您的帮助

Answer 1

您可以使用 display:flex; justify-content:center; align-items:center; 制作一个 class 并将其添加到您希望水平和垂直对齐居中的标签中。

.align-dropdown {
display:flex;
justify-content:center;
align-items:center;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<table class="table table-sm table-striped" id="dtable" style="font-size:0.9em">
  <thead style="white-space: nowrap;">
    <tr>
      <th style="width: 1%" class="text-center">ClientID</th>
      <th style="width: 14%" class="text-center">Approval</th>
      <th style="width: 26%" class="text-center">Comments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center;">AA0sdsadasdsadasdsadsadsa02</td>
      <td class="align-dropdown">
      <select name="D1" style="border-radius: 0.2rem;">
          <option value="empty"></option>
          <option value="Approved">Approved</option>
          <option value="Discuss">Discuss</option>
          <option value="Rejected">Rejected</option>
        </select></td>
      <td><input type="text" name="comments" style="width:99%;"></td>
    </tr>
    <tr>
      <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AA0sdsadasdsadasdsadsadsa02</td>
      <td class="align-dropdown"><select name="D1" style="border-radius: 0.2rem;">
          <option value="empty"></option>
          <option value="Approved">Approved</option>
          <option value="Discuss">Discuss</option>
          <option value="Rejected">Rejected</option>
        </select></td>
      <td><input type="text" name="comments" style="width:99%;"></td>
    </tr>
  </tbody>
</table>

如何在 table (Bootstrap 4.0) 中水平和垂直居中此 select 框？

How to center this select box horizontally and vertically in a table (Bootstrap 4.0)?

html

bootstrap-4

html-table