Centering content vertically within a Bootstrap 4 table

I'm attempting to center the content vertically in this table using the align-middle class but it doesn't seem to be working. How can I get it to work?

tr, td, p, a {
  border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table table-borderless">
   <tbody>
      <tr>
         <td class="align-middle">
            <p class="font-weight-bold font-italic text-secondary">LoremIpsum:</p>
         </td>
         <td class="align-middle">
            <a href="#">Lorem ipsum</a>,
            <a href="#">dolor sit amet</a>,
            <a href="#">consectetur adipiscing</a>,
            <a href="#">elit ultricies</a>
         </td>
      </tr>
      <tr>
         <td class="align-middle">
            <p class="font-weight-bold font-italic text-secondary">Magna morbi sociis:</p>
         </td>
         <td class="align-middle">
            <a href="#">Link</a>, 
            <a href="#">Link</a>
         </td>
      </tr>
   </tbody>
</table>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

If you wish to have the table cells aligned vertically, you will need to eliminate the margin from the paragraphs (my-0).

<td class="align-middle">
    <p class="font-weight-bold font-italic text-secondary my-0">LoremIpsum:</p>
</td>

Answer №2

No need to use the align-middle class here. The default margin of the paragraphs is causing the alignment issue. Simply switch the paragraph to a <span> element and your alignment will be fixed!

tr, td, p, a {
  border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<table class="table table-borderless">
   <tbody>
      <tr>
         <td>
            <span class="font-weight-bold font-italic text-secondary">LoremIpsum:</span>
         </td>
         <td>
            <a href="#">Lorem ipsum</a>,
            <a href="#">dolor sit amet</a>,
            <a href="#">consectetur adipiscing</a>,
            <a href="#">elit ultricies</a>
         </td>
      </tr>
      <tr>
         <td>
            <span class="font-weight-bold font-italic text-secondary">Magna morbi sociis:</span>
         </td>
         <td>
            <a href="#">Link</a>, 
            <a href="#">Link</a>
         </td>
      </tr>
   </tbody>
</table>

Answer №3

Thanks for your response! I've made sure to include margin:0 !important for the p tag.

tr, td, p, a {
  border: 1px solid black;
}
p{margin:0 !important}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table table-borderless">
   <tbody>
      <tr>
         <td class="align-middle">
            <p class="font-weight-bold font-italic text-secondary">LoremIpsum:</p>
         </td>
         <td class="align-middle">
            <a href="#">Lorem ipsum</a>,
            <a href="#">dolor sit amet</a>,
            <a href="#">consectetur adipiscing</a>,
            <a href="#">elit ultricies</a>
         </td>
      </tr>
      <tr>
         <td class="align-middle">
            <p class="font-weight-bold font-italic text-secondary">Magna morbi sociis:</p>
         </td>
         <td class="align-middle">
            <a href="#">Link</a>, 
            <a href="#">Link</a>
         </td>
      </tr>
   </tbody>
</table>

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

What is the most crucial element to focus on when initially building a website?

I have recently embarked on the journey of learning various programming languages for web development, and I strongly believe that the best way to enhance my skills is by brainstorming ideas and bringing them to life through coding. (Please feel free to co ...

phphtmlcss

Need to split your screen into two horizontal DIVs, each with their own scrollbars? Check out this example link for a demonstration!

Hey there! I have a question about creating something similar to this cool website: I'm working with Wordpress and using a child theme for my website. I want to include a fixed header as well. Currently, I've managed to give each div its own sc ...

htmlcsswordpress

Can I substitute custom tags for the traditional <p> tag?

My HTML with CSS has an issue where a custom HTML tag is not displaying the text while my CSS picks up another tag. Interestingly, replacing <title>Layout Controls</title> with <p>Layout Controls</p> resolves the problem and shows t ...

javascriptcsshtml

Troubleshooting Bootstrap: Identifying errors in my bootstrap code

Could you help me diagnose the issue with this code? I have tailored it to be responsive on my tablet by using 12 columns for two divs, expecting the third div to be in a new row. However, upon checking my index.html on the tablet, all the divs are display ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Header that sticks to the top of a container as you scroll through it

Many questions arise regarding sticky elements in the DOM and the various libraries available to handle them, such as jquery.pin, sticky-kit, and more. However, the issue with most of these libraries is that they only function when the entire body is scro ...

jqueryhtmlcsssticky

What steps should I take to troubleshoot and resolve a malfunctioning jQuery hoverOut function?

There seems to be a issue with the code. The website successfully detects when the mouse hovers over the element and logs it in the console, however, there is an error when trying to log out when the mouse leaves the element. $('.designer'). ...

htmljquery

"Discussing the process of calling a function with parameters from a controller into a view and the steps to bind that function to a directive in

Describing the issue in the title, I present the following code snippet. JavaScript: app.controller("myCtrl", function($scope) { //this is my controller $scope.type = "type"; $scope.swapChartType = function(type) { if ( ...

htmlangularjsangularjs-directiveangularjs-controller

Incorporate a video within the royal slider feature

Next is my deluxe slider code. This slider displays only images but I am looking to incorporate video as well. I have searched online and tried different solutions, but haven't found one that works for me. Can someone please guide me on how to achieve ...

javascriptjqueryhtmlcssslider

Unable to back out of side navigation

My side navigation menu is giving me some trouble. It opens up just fine when I click the button, but it won't close back up when I click it again. The button is supposed to toggle between opening and closing the side navigation. I've looked at ...

javascriptcsshtml

What are the risks of using a PHP file within an iframe?

Upon discovering that my web server was unable to run PHP within my HTML file, I decided to use an iframe directed to my PHP script instead. The implementation went smoothly, and now my website features a charming comment form for users to interact with. ...

phphtmliframe

Printing to the screen with AJAX PHP

Struggling to create a simple ajax code that displays the word 'hello' on the screen. Need some guidance as nothing seems to be working. Any help or corrections are greatly appreciated. Thank you. test6.html <script src="https://ajax.goo ...

javascriptphpjqueryhtmlajax

Help me understand how to display the data in a JSON array

{ "entries": [ { "id": 23931763, "url": "http://www.dailymile.com/entries/23931763", "at": "2013-07-15T21:05:39Z", "message": "I ran 3 miles and walked 2 miles today.", "comments": [], "likes": [], ...

javascriptjqueryhtmljsonjsonp

When state updates in React, the component will rerender without affecting its style

There seems to be a minor oversight on my part. The issue arises in the parent component where I maintain a state of selected items, which are added from the child component. The background color of the child component changes when an item is selected. Ad ...

javascriptcssreactjsreact-hooks

Unable to cycle through an array of objects in JavaScript. Only receiving output for the initial element

var people = new Array(); var individual = { first_name: "Padma", identification_number: 1, region: "India" }; people.push(individual); people.push([individual = { first_name: "Balaji", identification_number: 3, region: "India" }]); people. ...

javascripthtmljquery

Adjusting Font Size in Angular Material Design

Recently, I incorporated https://material.angularjs.org/latest/ to optimize the responsive design of my website. One key feature I am focusing on is adjusting the font size based on different screen sizes. For smaller screens, I intend to set the font siz ...

htmlcssangularjsangular-material

Creating a video game HUD effect using JavaScript and HTML5

In an attempt to recreate a video game HUD using HTML5, I have styled a div with CSS properties to resemble a game overlay. When a navigation link is clicked, the div should transition from a hidden state (display:none), then flash twice rapidly before fad ...

javascripthtml

Ensure child elements do not surpass parent size in HTML/CSS/Javascript without altering the children directly

I am intrigued by how iframes neatly encapsulate all site data within a frame and adjust it to fit the size. Is there any method to achieve this functionality in an HTML wrapper? Can the wrapper be configured so that regardless of the content, it is dis ...

javascripthtmlcss

fluid columns gliding from side to side

I'm currently working with Bootstrap to design responsive columns. My goal is to have the next column of content slide in from either the left or right side when the user clicks on the respective arrow button. While I have found solutions for fixed w ...

jquerycsstwitter-bootstrap

Is there a way to ensure a Bootstrap modal is loaded only after successful form validation?

I am currently working on implementing a modal window that displays the terms & conditions, and only submits data to the database once the user has accepted them. I would like to validate user input before opening the modal. Here is my code snippet: indiv ...

python-3.xdjangotwitter-bootstrapdjango-views

Animating Elements with CSS and HTML

Struggling with my website project, specifically creating a login page. The issue arises when resizing the browser, causing elements to look misaligned and chaotic. Before: view image here After: view image here /* Bordered form */ form { margin-l ...

htmlcss