如何用CSS调整表格指定行内Logo的均等边距？

架构老林

2026-7-27

解决方案

首先你犯了个小错误：你给Div设的是类（class="tableLogoAus"），但CSS里用了id选择器#tableLogoAus，这会导致样式根本没正确应用到目标元素上。

然后说核心问题：表格的<td>元素在默认的表格布局里，margin属性基本不起作用，强行用负margin还会打乱表格的自动计算布局，这就是你布局混乱的原因。给你两个靠谱的解决思路：

思路一：基于原有表格结构调整（最小改动）

修正选择器，用padding替代margin来控制Logo间距，因为padding对表格单元格是友好的：

/* 用类选择器.替代id选择器# */
div.tableLogoAus table td {
  /* 左右padding控制单元格之间的空隙，数值根据你的需求调 */
  padding: 0 10px;
  border: none; /* 去掉默认表格边框的干扰 */
}
/* 让Logo在单元格里居中，避免偏移 */
div.tableLogoAus table td img {
  display: block;
  margin: 0 auto;
}

思路二：改用Flex布局（更灵活可控）

如果表格布局限制太多，直接把澳大利亚行的Logo改成Flex容器，均等间距的实现会更简单：

调整HTML（把该行的表格结构换成Flex容器）

<div class="tableLogoAus">
  <div class="aus-logo-row">
    <img src="你的Logo1地址" alt="Logo描述">
    <img src="你的Logo2地址" alt="Logo描述">
    <img src="你的Logo3地址" alt="Logo描述">
  </div>
</div>

对应的CSS

.aus-logo-row {
  display: flex;
  /* 让Logo之间的间距完全均等，左右也留空隙 */
  justify-content: space-around;
  /* 如果你想左右不留空隙，只用中间均等，换成这个：
  justify-content: space-between; */
  /* 额外设置固定间距（可选，和justify-content二选一或配合用） */
  gap: 15px;
  align-items: center; /* 垂直居中Logo */
  width: 100%;
}
.aus-logo-row img {
  max-width: 100%; /* 防止Logo撑破容器 */
  height: auto;
}