javascript - 使用内联 IMG 在 TD 中居中文本

Question

所需的效果是在表格单元格内居中放置文本，而其对齐不受同一表格单元格内右中间的内联图像的影响。请参阅问题图的链接以了解我的意思。 “解决方案”表示期望的效果，而“问题”表示代码当前正在做什么。非常感谢您的协助。

// Create table cell for job priority.
var jobPriority  = jobRow.insertCell(3);
var jobPriorityValue = Number(document.getElementById('job-priority').value);
jobPriority.id = 'jobPriorityCell'+ jobIndex;
var jobPriorityID = 'jobPriority' + jobIndex;
var jobPriorityIconID = 'jobPriorityIcon' + jobIndex;
var jobPriorityNumberID = 'jobPriorityNumber' + jobIndex;
var jobPrioritySave = false;
jobPriority.innerHTML = '<dt id="' + jobPriorityID + '">' + jobPriorityValue + '</dt><input type="number" id="' + jobPriorityNumberID + '"><img src="images/push_mouseout.svg" id="' + jobPriorityIconID + '" class="icon3">';
document.getElementById(jobPriorityID).style.margin = '0 auto';
document.getElementById(jobPriorityID).style.display = 'inline';
document.getElementById(jobPriorityNumberID).style.cssFloat = 'left';
document.getElementById(jobPriorityNumberID).style.marginLeft = '3px';
document.getElementById(jobPriorityNumberID).style.display = 'none';
document.getElementById(jobPriorityNumberID).style.width = '38px';
document.getElementById(jobPriorityNumberID).style.textAlign = 'center';
document.getElementById(jobPriorityNumberID).min = '1';
document.getElementById(jobPriorityNumberID).max = '99';
document.getElementById(jobPriorityIconID).style.marginRight = '3px';
document.getElementById(jobPriorityIconID).style.cssFloat = 'right';
document.getElementById(jobPriorityIconID).style.visibility = 'hidden';
document.getElementById(jobPriority.id).addEventListener('mouseover', function () {
    if (!jobPrioritySave)
        document.getElementById(jobPriorityIconID).style.visibility = 'visible';
});
document.getElementById(jobPriority.id).addEventListener('mouseout', function () {
    if (!jobPrioritySave)
        document.getElementById(jobPriorityIconID).style.visibility = 'hidden';
});
document.getElementById(jobPriorityIconID).addEventListener('mouseover', function () {
    if (!jobPrioritySave)
        document.getElementById(jobPriorityIconID).src = menuImages.push.image.mouseover.src;
    else
        document.getElementById(jobPriorityIconID).src = menuImages.save.image.mouseover.src;
        document.getElementById(jobPriorityIconID).style.cursor = 'pointer';
});
document.getElementById(jobPriorityIconID).addEventListener('mouseout', function () {
    if (!jobPrioritySave)
        document.getElementById(jobPriorityIconID).src = menuImages.push.image.mouseout.src;
    else
        document.getElementById(jobPriorityIconID).src = menuImages.save.image.mouseout.src;
});
document.getElementById(jobPriorityIconID).addEventListener('click', function () {
    if (!jobPrioritySave) {
        jobPrioritySave = true;
        document.getElementById(jobPriorityNumberID).value = jobPriorityValue;
        document.getElementById(jobPriorityID).style.display = 'none';
        document.getElementById(jobPriorityNumberID).style.display = 'initial';
        document.getElementById(jobPriorityIconID).style.visibility = 'visible';
        document.getElementById(jobPriorityIconID).src = menuImages.save.image.mouseout.src;
    }
    else {
        jobPrioritySave = false;
        jobPriorityValue = document.getElementById(jobPriorityNumberID).value;
        document.getElementById(jobPriorityID).innerText = jobPriorityValue;
        document.getElementById(jobPriorityID).style.display = 'initial';
        document.getElementById(jobPriorityNumberID).style.display = 'none';
        document.getElementById(jobPriorityIconID).style.visibility = 'visible';
        document.getElementById(jobPriorityIconID).src = menuImages.push.image.mouseout.src;
    }
});

Answer 1

将图像绝对放置在相对放置的表格单元格中:

td {
  border: 1px solid black;
  width: 100px;
  text-align: center;
  position: relative;
}
td img {
  position: absolute;
  right: 0;
}

<table>
  <tr>
    <td>
      text
      <img src="http://via.placeholder.com/20x20" />
    </td>
  </tr>
</table>