Ways to center text vertically within a cell in a Bootstrap 5 table

I am trying to achieve vertical alignment in one of the cells of a table I created. According to the Bootstrap 5 documentation, the vertical-alignment utilities only affect certain elements like inline, inline-block, inline-table, and table cell elements.

To illustrate my confusion, here is a small comparison table:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f819f83">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c7dcc2dcc0">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-dark">
    <tbody id="table">
        <tr class="row">
            <td class="col-sm-2 align-middle">not aligned</td>
            <td class="col-sm-1">
                <button>
                    <div class="row">
                        <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 class="col-sm-9" colspan="9"></td>
        </tr>
    </tbody>
</table>
<table class="table table-dark">
    <tbody>
        <tr>
            <td class="col-sm-2 align-middle">aligned</td>
            <td class="col-sm-1">
                <button>
                    <div class="row">
                        <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 class="col-sm-9" colspan="9"></td>            
        </tr>
    </tbody>
</table>

Despite my efforts, the text in the first table cell remains not vertically aligned like the second one. I even attempted using a flex box with 

<div class="d-flex align-items-center">...</div>
, but encountered the same result. The presence of class="row" in my tr for horizontal alignment complicates achieving vertical alignment. How can I resolve this issue and vertically align items in the first cell?

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Do you mean centering both horizontally and vertically?

It's been mentioned in the comments that using tables with Bootstrap's row class can create alignment issues.

However, if you still want to maintain the current layout, you could apply display: contents to the element with the row class. This will adjust the positioning of the children relative to the parent element. For more details, check out the documentation here.

Your updated code snippet:

tr.row {
  display: contents
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101746f716f73">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e051b0519">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-dark">
  <tbody id="table">
    <tr class="row">
      <td class="col-sm-2 align-middle">now aligned</td>
      <td class="col-sm-1">
        <button>
                    <div class="row">
                        <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 class="col-sm-9" colspan="9"></td>
    </tr>
  </tbody>
</table>
<table class="table table-dark">
  <tbody>
    <tr>
      <td class="col-sm-2 align-middle">aligned</td>
      <td class="col-sm-1">
        <button>
                    <div class="row">
                        <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 class="col-sm-9" colspan="9"></td>
    </tr>
  </tbody>
</table>

Answer №2

While I won't keep you waiting for the correct answer, in the meantime please take a look at the following resource [1]: https://getbootstrap.com/docs/5.0/utilities/vertical-align/, which explains the Vertical Alignment of items and item containers in Bootstrap 5. This property can also be used to align table cells and items within those cells.

Cheers and Happy Developing!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to eliminate padding between Bootstrap col-xx columns

When using Bootstrap's col-xx classes, the padding can sometimes result in wasted space on smaller screens. To address this, I have decided to remove the padding by nesting col-xx with specific CSS settings like shown below: <style> div[class^= ...

csstwitter-bootstrap

Is it achievable to have a background image cover size with a responsive rollover effect?

I’m currently facing a unique challenge where I want to have an image as the background of my website, with the size set to cover the entire screen. On this background image, there are elements like buildings that I want to interact with when hovered ove ...

javascriptjqueryhtmlcss

What is the proper way to incorporate quotation marks within other quotation marks?

Is there a way to generate an ID within the myFunction() function in JavaScript? I need a single string to call an HTML script as a variable. Any corrections or suggestions are welcome. Here is a sample code snippet: <button class="tablinks" onclick=" ...

javascripthtml

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

htmlstylescsstext-size

Alter the border line's color based on the specific section or div it overlays

I am attempting to utilize jQuery in order to change the color of my border line depending on its position within the divs. I have set the position to absolute and it is positioned on both divs. My goal is to make the line on the top div appear as grey, wh ...

javascripthtmljquerycss

Ensure that x-editable fields are visible and activated when focused on

I recently encountered an issue with x-editable for bootstrap while working on a project that involves creating editable table fields with client data. Specifically, I faced a challenge with a comments field that can sometimes be quite long, causing the la ...

jquerytwitter-bootstrap

What are the ways to recognize various styles of handlebar designs?

Within my project, I have multiple html files serving as templates for various email messages such as email verification and password reset. I am looking to precompile these templates so that they can be easily utilized in the appropriate situations. For ...

htmlnode.jstypescripthandlebars.js

There seems to be an issue with the functionality of Angular Material on iOS devices

I recently developed a website using Angular and Angular Material. While the site functions properly on Windows and Android across all browsers, I encountered an issue with iOS devices running Safari. Some elements on the page do not display correctly on i ...

htmlcssiosangularangular-material

CSS Malfunction in Chrome: Some Code Not Displaying Properly

Below is the content of my main.css file: body { font-family: josefin; } .splash-content { text-align: center; } .register-button { color: #6A136C; width: 300px; height: 100px; border: 5px solid #6A136C; } .btn { padding: 1 ...

pythoncssgoogle-chromeflask

Activate the clicked tab in the Bootstrap navbar when selected

I have gone through similar posts, but I am unable to get mine to work. My goal is to activate the clicked tab. Here is what my bootstrap navbar looks like in HTML: <div class="navbar navbar-default" role="navigation"> <div class="container" ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-3

When attempting to utilize res.sendfile, an error arises indicating that the specified path is incorrect

I am facing an issue with my Express.js server and frontend pages. I have three HTML and JS files, and I want to access my homepage at localhost:3000 and then navigate to /register to render the register.html page. However, I am having trouble specifying t ...

javascripthtmlexpressfrontendbackend

Ways to include additional bars in your Animated jQuery, CSS, and HTML Bar Graph

I found this awesome website that explains how to create an animated bar graph using HTML, CSS, and JQuery. I want to implement it in my web application to display monthly statistics for each of the 7 divisions in my company. However, I'm having troub ...

jqueryhtmlcss

Issue with jQuery Cycle causing images not to load in IE all at once, leading to blinking

When using the jQuery Cycle plugin in IE8 (as well as other versions of Internet Explorer), I am encountering an issue. My slideshow consists of 3 slides, each containing a Title, Description, and Image. The problem arises when viewing the slideshow in I ...

javascriptjqueryhtmlcsscycle

I am currently utilizing Ajax to trigger the forgot password button, which then sends an email to a specific email address through CodeIgniter

When using ajax to click the forget button and send an email to a particular email address, I am getting an error "Fail". Can anyone help me figure out what the problem might be? Below you can see the form and controller code: Form <div class="field-w ...

htmlajaxcodeigniter

What could be causing flexbox not to shrink to fit after wrapping its elements?

My goal is to create a flexbox with a maximum width that allows elements to wrap beyond that width without affecting the overall size of the flexbox's "row." The issue I am encountering is that when an element stretches beyond the maximum width and w ...

htmlcssflexbox

Does including the "max-height" property within a table result in a height of zero?

Check out the code snippet below (you can also view a demo on JsFiddle): #outer { display: table; height: 200px; width: 100%; background: gray; } #inner { width: 100%; background: blue; max-height: 100%; } <div id="outer" ...

htmlcsscss-tables

What is the best way to create a header similar to the one in the image using only CSS

Wondering if it's possible to create a header like the one in the image using just pure CSS and without Photoshop. How can I design it in a professional manner? You can view an example of the image here. ...

htmlcss

Displaying checkbox values with JavaScript

How can I display multiple checkbox values when checked in HTML code? Whenever I check a checkbox, I want its value to be shown alongside the previously checked values. Right now, my code only displays one value at a time. Any suggestions on how to achie ...

javascriptjqueryhtml

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Tips for centering an image vertically in a table's cell

I'm looking to vertically center the text, but I'm not sure how to do it. Check out my attempt on the fiddle link below: http://jsfiddle.net/jTW4d/ ...

htmlcss