如何用纯CSS实现td内img左对齐垂直居中、a标签水平垂直居中

实现方案 #

无需修改现有HTML结构，仅需补充如下CSS即可实现全部需求：

/* 可将选择器替换为你自定义的td类名，避免影响其他单元格 */
td:first-child {
  display: flex;
  align-items: center; /* 统一实现子元素垂直居中 */
  min-width: 100px; /* 可按需调整列宽，避免内容挤压 */
  height: 100%;
}

td:first-child img {
  flex-shrink: 0; /* 防止图片被压缩变形 */
  padding: 0 8px; /* 左右内边距可自行调整数值 */
  vertical-align: middle;
}

td:first-child a {
  flex: 1; /* 自动填充单元格剩余宽度 */
  text-align: center; /* 文本水平居中 */
}

如果需要全局固定表格列宽，可额外给外层table添加样式：

table {
  table-layout: fixed;
  width: 100%; /* 可按需调整表格总宽度 */
}

效果说明

• 无论图片是否存在，a标签文本始终保持水平、垂直双向居中：a标签设置flex:1后会自动占满单元格剩余宽度，配合text-align: center实现水平居中，flex容器的align-items: center保证垂直居中
• 图片默认在flex容器最左侧实现左对齐，同时继承flex容器的垂直居中属性，符合要求
• 可直接调整img的padding属性、td的min-width属性实现边距、列宽的自定义调整

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