PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, August 2, 2022

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

 August 02, 2022     bootstrap-4, html, html-table     No comments   

Issue

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


Solution

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>



Answered By - Sumit Sharma
Answer Checked By - Robin (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing