将图像对齐到 td 的中心

Question

我有以下 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);

Answer 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>

Answer 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> 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>

Answer 3

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

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