在 td 的中心对齐图像答案

【问题标题】：Align an image in the center of a td在 td 的中心对齐图像
【发布时间】：2020-11-25 00:12:25
【问题描述】：

我有以下 HTML 结构，我需要在 td 的中心垂直对齐图像（图标）。我尝试了几种选择，但没有一个适合我。你们能帮忙吗？非常感谢。

var row = $("<tr>" +
  "<td style='word-wrap:break-word; height:1px; padding-right:0; '>" +
  "<div style='float:left;width: 20%; height:100%;'>" +
  < i class = 'fa fa-cogs'
  style = 'font-size:14px;color:darkblue'
  data - toggle = 'tooltip'
  title = '100% Automatic' > < /i> +
  "</div>" +
  "<div style='float: right; width: 80%; height:100%;'>" +
  "<a style='width: 100%; text-decoration: underline;' href='" + url_target + "' target='_blank'>" +
  obj.HITO +
  "</div>" +
  "</td>" +
  "<td style='word-wrap:break-word'>" +
  "<a style='text-decoration: underline; color:" + colorPriority + "' href='" + url_proyect + "' target='_blank'>" +
  obj.NAME_PROYECT + "</td>" +
  "<td style='word-wrap:break-word'>" + obj.SUBDOMAIN + "</td>" +
  "<td style='word-wrap:break-word'>" + obj.TITLE + "</td>" +
  "<td style='word-wrap:break-word'>" + obj.NOTE + "</td>" +
  "<td style='word-wrap:break-word'>" + obj.MODIFIED + "</td>" +
  "<td style='word-wrap:break-word'>" + obj.RESPONSABLE + "</td>" +
  "<td style='word-wrap:break-word'>" + obj.PLANNED_DATE + "</td>" +
  "<td style='word-wrap:break-word'>" + obj.STATE + "</td>" +
  "<td style='word-wrap:break-word; background-color:" + colorSla + "'>" + obj.SLA + "</td></tr>");
}
$("#tableResult").children('tbody').append(row);

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

将样式vertical-align: middle 添加到td 并持有图像图标并删除td 内的父div

<td style='word-wrap:break-word; height:1px; padding-right:0; vertical-align:middle '>
<i class='fa fa-cogs' data-toggle='tooltip' title='100% Automatic'></i>
<a href='url_target'>obj.HITO</a>
</td>

【讨论】：

【解决方案2】：

我找到了解决方案。添加 style='word-wrap:break-word; vertical-align: middle' to the <td> tag, removed parent div from the <a> and the <i> and added <div style='height:100%; display: flex; align-items:center; margin: 0 auto;'> as the parent of both<a> and <i>

【讨论】：

【解决方案3】：

td {
    display: flex;
    align-items: center;
    justify-content: center;
}

如果您在td（或图标）中设置width，请添加margin: 0 auto;

【讨论】：