如何将按钮与 HTML 中表格行中的文本对齐

Question

编辑：我无法解决问题，所以我删除了引导类并自己制作了所有按钮，所以现在它们完美对齐，似乎引导类搞砸了

如何在 HTML 表格中的 tr 中对齐不同的 td。在这里你可以找到我想说的截图：Image of different elements that I want to vertically align in a tr element

任何建议都会有所帮助。提前致谢！

这个tr是js生成的。代码：

let itemRow = document.createElement('tr');

        

    let item1 = document.createElement('td');
            let item2 = document.createElement('td');
            let item3 = document.createElement('td');
            let item4 = document.createElement('td');
            let item5 = document.createElement('td');
            let item6 = document.createElement('td');
            let btnRemove = document.createElement('button');
            let btnEdit = document.createElement('button');
        item1.innerHTML = bookTitle;
                item2.innerHTML = author;
                item3.innerHTML = recipient;
                item4.innerHTML = dateIssued;
                btnRemove.className = 'btn btn-outline-danger btn-remove';
                btnRemove.textContent = 'X';
                btnEdit.className = 'btn btn-outline-success btn-edit';
                btnEdit.textContent = 'Edit';
                
        
                itemRow.appendChild(item1);
                itemRow.appendChild(item2);
                itemRow.appendChild(item3);
                itemRow.appendChild(item4);
                item6.appendChild(btnEdit);
                item5.appendChild(btnRemove);
                itemRow.appendChild(item6);
                itemRow.appendChild(item5);
                list.appendChild(itemRow);

Answer 1

没有任何填充的基本表格默认情况下应该垂直对齐所有内容。

看起来您可能必须撤消/覆盖任何应用于您的标记的 CSS，无论是使用您自己的 CSS 还是来自 Bootstrap 的 CSS，@burham 注意到您正在使用它。

这是一个非常简单的小提琴示例，每个 <td> 的高度为 80 像素，以显示表格的“自然”垂直对齐方式。 https://jsfiddle.net/pzm6ktv5/