如何对齐HTML表格行内的文本与按钮？附Bootstrap样式冲突说明

编辑说明：最初未解决对齐问题，因此移除了全部Bootstrap类，自行实现所有按钮的样式，目前页面元素已完美对齐，判断此前是Bootstrap类干扰了对齐效果。

核心问题 #

如何实现HTML表格中同一tr行内不同td元素的对齐？希望同一行内的文本、操作按钮能够实现垂直对齐，对应效果可参考配套的同tr元素内需垂直对齐的不同元素示例图。

动态生成行的相关代码 #

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);

实现对齐的具体方案 #

• 给所有td单元格设置统一垂直对齐属性：在全局CSS中添加td { vertical-align: middle; }，这是HTML表格实现行内元素垂直对齐的核心规则，显式声明可以消除不同浏览器的默认样式差异，保证单元格内的文本、嵌套按钮都能沿垂直中线对齐。
• 框架样式排查要点：此前的对齐偏差来自Bootstrap内置的行高、内边距、垂直对齐规则对原生表格样式的覆盖，移除相关类后，为单元格、操作按钮设置统一的内边距和行高，即可保持稳定对齐。
• 减少冗余样式：只要td本身配置了垂直居中规则，单元格内嵌套的按钮会自动跟随居中，不需要单独为按钮设置垂直定位样式，简化代码逻辑。
• 错位排查技巧：如果后续仍出现视觉偏移，可逐一核对单元格内元素的行高设置，确保文本、按钮的行高和单元格整体行高保持一致，避免因行高不匹配导致的上下错位。

内容的提问来源于stack exchange，提问作者user14261439