如何将一个表格单元格居中，使单元格比其他单元格少？ [复制]答案

【问题标题】：How can I center a table cell in a row with fewer cells than the rest? [duplicate]如何将一个表格单元格居中，使单元格比其他单元格少？ [复制]
【发布时间】：2018-10-16 18:05:46
【问题描述】：

我尝试使用中心标签，我尝试使用对齐：中心。我尝试了一些东西，但没有什么能让我的 td 标签居中。我试图居中的 td 标签是最后一张图片，它粘在左侧。这也是实际页面的链接，因为我使用了内联 css，它可能更容易在检查器中分开。

<table>
  <tbody>
    <tr>
      <td><img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/pic1_large.jpg?v=1539611201" /></td>
      <td><img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/pic1_large.jpg?v=1539611201" /></td>
      <td><img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/pic1_large.jpg?v=1539611201" /></td>
    </tr>
    <tr>
      <td> <img class="shadowed" src="//cdn.shopify.com/s/files/1/1258/4447/files/38-Breckenridge-2-6-6T-Naked-Brass_large.jpg?v=1539704926" alt="" width="613" height="258" /></td>
    </tr>
  </tbody>
</table>

【问题讨论】：

首先让自己更轻松，然后将 CSS 放在 css 中而不是 style 属性中。
您是否要使火车图像居中？
<table> 元素用于呈现电子表格。你在数火车吗？十多年前，使用它们进行布局不再被接受。
我通常不使用内联样式，我只是在 Shopify 上快速获取一些东西，并且不想弄清楚那里的文件系统。这可能会在一周内重建，所以我不追求优雅。
第一课：不要发布一个可以用一小部分标记显示的荒谬复杂的问题示例。

标签： html css shopify

【解决方案1】：

要使最后一行的单元格全宽（这样您就可以将其中的内容居中），您需要给它colspan="3"。

<tr>
  <td colspan="3" style="text-align: center;">
    <a href> 
       <img  />
   </a>
 </td>

请注意区别：您不能将单元格连续居中。您只能将其跨越多个列并将其中的内容居中。

虽然上述方法可行，但我需要强调一个事实，即您不应该使用 <table> 元素进行布局。它在 10 多年前就不再是一种可接受的技术了。

您应该使用网格、弹性框或块级元素。

【讨论】：

会尝试的。我刚刚从 codepen 中获取了一个简单画廊的代码。我尝试将 td 转换为 div，但这也没有用。