how to vertically align a text in a bootstrap 5 table cell?-CodePudding

I created a table and I want one of the cells to have a vertical alignment. The bootstrap 5 documentation states:

Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements

I just made a small comparison table, to demonstrate my disarray:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table >
    <tbody id="table">
        <tr >
            <td >not aligned</td>
            <td >
                <button>
                    <div >
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Flag_of_Papua_New_Guinea.svg/320px-Flag_of_Papua_New_Guinea.svg.png" width="64px" height="48px">
                    </div>
                </button>
            </td>
            <td  colspan="9"></td>
        </tr>
    </tbody>
</table>
<table >
    <tbody>
        <tr>
            <td >aligned</td>
            <td >
                <button>
                    <div >
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Flag_of_Papua_New_Guinea.svg/320px-Flag_of_Papua_New_Guinea.svg.png" width="64px" height="48px">
                    </div>
                </button>
            </td>
            <td  colspan="9"></td>            
        </tr>
    </tbody>
</table>

So why does the first table not have a vertically correctly aligned text like the second one?

I also tried to add a flex box: <div >...</div>. Same result. I need that in my tr because of horizontal alignment of table elements. How can I still get vertical aligned items in my first cell?

CodePudding user response：

I assume you mean both horizontal and vertical centering, right?

As already pointed out in the comments, mixing tables with Bootstrap's row class causes issues with aligning items.

But, if you want to keep the current layout as it is, you could use display: contents on the element with class row. This makes the children position relative to the parent of the element. Read more in the docs here.

Your modified snippet:

tr.row {
  display: contents
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table >
  <tbody id="table">
    <tr >
      <td >now aligned</td>
      <td >
        <button>
                    <div >
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Flag_of_Papua_New_Guinea.svg/320px-Flag_of_Papua_New_Guinea.svg.png" width="64px" height="48px">
                    </div>
                </button>
      </td>
      <td  colspan="9"></td>
    </tr>
  </tbody>
</table>
<table >
  <tbody>
    <tr>
      <td >aligned</td>
      <td >
        <button>
                    <div >
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Flag_of_Papua_New_Guinea.svg/320px-Flag_of_Papua_New_Guinea.svg.png" width="64px" height="48px">
                    </div>
                </button>
      </td>
      <td  colspan="9"></td>
    </tr>
  </tbody>
</table>

CodePudding user response：

I don't let you wait for the correct answer but till that time you must look upon the following [1]: https://getbootstrap.com/docs/5.0/utilities/vertical-align/ which states the Vertical Alignment of item and item container in Bootstrap 5. You can use the same property to set the alignment for the table cell and item in that table cell.

Cheers and Enjoy Development