如何在HTML表格中居中图片？需让3张图在4列上方居中

要让表格第一行的3张图片在下方两行4列图片的正上方居中，核心是让首行内容的宽度与下方4列总宽度一致，并在该宽度内居中排列3个元素，以下是两种可行方案：

方案一：利用表格原生跨列属性（无需额外CSS） #

直接修改HTML结构，将第一行的3个图片容器放入一个跨4列的单元格中，通过单元格的文本居中实现整体对齐：

<div class="supercenter center" id="menuButtons" style="bottom: -15%;">
        <table>
                <tr class="menuButtonList">
                    <td colspan="4" style="text-align: center;">
                        <a tabindex="1" href=""><img class="menubutton menu-create" src="../assets/category-create.png" title="Create"></a>
                        <a tabindex="1" href="./leaderboard"><img class="menubutton menu-leaderboard" src="../assets/category-scores.png" title="Scores"></a>
                        <a tabindex="1" href="./search/*?type=saved"><img class="menubutton menu-saved" src="../assets/category-saved.png" title="Saved Levels"></a>
                    </td>
                </tr>
                <tr class="menuButtonList">
                    <td id="menu_quests"><a tabindex="1" href=""><img class="menubutton menu-quests" src="../assets/category-quests.png" title="Quests"></a></td>
                    <td id="menu_daily"><a tabindex="1" href="./daily"><img class="menubutton menu-daily" src="../assets/category-daily.png" title="Daily Level"></a></td>
                    <td id="menu_weekly"><a tabindex="1" href="./weekly"><img class="menubutton menu-weekly" src="../assets/category-weekly.png" title="Weekly Demon"></a></td>
                    <td><a tabindex="1" href="./gauntlets"><img class="menubutton menu-gauntlets" src="../assets/category-gauntlets.png" title="Gauntlets"></a></td>
                </tr>
                <tr class="menuButtonList">
                    <td id="menu_featured"><a tabindex="1" href="./search/*?type=featured"><img class="menubutton menu-featured" src="../assets/category-featured.png" title="Featured"></a></td>
                    <td><a tabindex="1" href="./search/*?type=hof"><img class="menubutton menu-hof" src="../assets/category-hof.png" title="Hall Of Fame"></a></td>
                    <td><a tabindex="1" href="./mappacks"><img class="menubutton menu-mappacks" src="../assets/category-packs.png" title="Map Packs"></a></td>
                    <td><a tabindex="1" href="./search"><img class="menubutton menu-search" src="../assets/category-search.png" title="Search"></a></td>
                </tr>
        </table>
</div>

说明 #

• colspan="4"让首行单元格的宽度与下方两行4列的总宽度完全匹配
• text-align: center使单元格内的3个图片容器整体居中
• 若需要调整图片间的间距，可给<a>标签添加margin样式（如margin: 0 10px;）

方案二：CSS Flex布局调整（不修改核心HTML结构） #

如果不想改动HTML结构，可通过添加少量CSS实现居中：

table {
  table-layout: fixed;
  width: 100%;
}
.menuButtonList:first-child {
  display: flex;
  justify-content: center;
}
.menuButtonList:first-child td {
  flex: 0 0 auto;
}

说明 #

• table-layout: fixed固定表格宽度，确保下方4列的宽度能撑满表格
• 给首行的<tr>设置Flex布局，justify-content: center让3个<td>在表格宽度内居中
• flex: 0 0 auto避免首行的<td>被过度拉伸，保持图片原有尺寸

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