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

Question

I've tried to do it using this approach and many others, but no success:

Here is the Fiddle

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

Appreciate your help

Sumit Sharma · Accepted Answer · 2022-05-28T12:37:17.343

You can make a class with display:flex; justify-content:center; align-items:center; and add it to the tag where you want the horizontal and vertical alignment to be in center.

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

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

1 Answers1