<a> 居中和 <img> 在左侧对齐，都在 <td> 内垂直居中

Question

我想显示一个左对齐的图像（在左/右有一些填充）但在表格单元格中垂直居中，同时保持文本水平和垂直居中。

JSFiddle 完整示例：

https://jsfiddle.net/6bsgkytq/

<tr>
  <td>
    <img title="Out of stock" src="..."><!-- This image may or may not exist -->
    <a href="">4000.4</a>
  </td>
  <td>Lemon soda</td>
  <td>10/10/2021</td>
  <td>London, United Kingdom</td>
  <td>Waiting</td>
</tr>

img {
  vertical-align: middle;
}

使用这段代码，结果是这样的：

我想要：

1. 让文本居中在单元格上（水平和垂直），无论图像是否存在；我可以将图像作为td 背景，但我不想要，因为我希望将title 属性显示为带有更多信息的工具提示
2. 图像垂直居中但左对齐
3. 图片左边有一个padding，右边有可能（通过增加列宽 - 现在固定为 90px - 如果它太小而无法处理图片和文字）

像这样：

我宁愿避免使用 javascript，只使用 HTML/CSS。

Answer 1

您可以使用如下情况：将position: absolute; 用于图像（position: relative 用于该单元格）并使用top: 50%; 和transform: translateY(-50%); 将其垂直居中。然后可以使用通常的方法使文本居中。您唯一需要的是为该单元格设置width，但似乎您在该单元格中的内容和图像是这样可以可靠地“预先计算”的

编辑/添加：为了在不重叠图像的情况下允许更长的文本，您可以在该单元格中使用对应的侧边距 - 如果需要，该单元格将相应地增长到超出其定义的width。

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #ddd;
  height: 40px;
  padding: 10px;
}

td:first-child {
  width: 40px;
  text-align: center;
  vertical-align: center;
  position: relative;
  padding: 10px 40px;
}

td:first-child img {
  position: absolute;
  left: 10px;
  display: block;
  top: 50%;
  transform: translateY(-50%);
}

<table>
  <tr>
    <td>
      <img title="Out of stock" src="...">
      <!-- This image may or may not exist -->
      <a href="">4000.4</a>
    </td>
    <td>Lemon soda</td>
    <td>10/10/2021</td>
    <td>London, United Kingdom</td>
    <td>Waiting</td>
  </tr>
   <tr>
    <td>
      <img title="Out of stock" src="...">
      <!-- This image may or may not exist -->
      <a href="">4000000000000.5</a>
    </td>
    <td>Lemon soda</td>
    <td>10/10/2021</td>
    <td>London, United Kingdom</td>
    <td>Waiting</td>
  </tr>
</table>

Answer 2

我不知道它是否满足所有要求，但这是一个可能的解决方案。

要点：

table td {
    position:relative;
}

table td a {
    margin: 0px 20px;
}

/* Image vertically aligned */
table tbody img {
  position:absolute;
    left: 5px;
    top: 50%;
    margin-top:-5px; /* half image... */
}

完整代码

table {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: small;
  text-align: left;
  vertical-align: middle;
  border-collapse: collapse;
  border: 0;
  margin: 0;
  width: 98%;
  animation-name: animWidth;
  animation-duration: 10s;
}

@keyframes animWidth {
  0% {width: 98%}
  50% {width: 40%}
  100% {width: 98%}
}

table th,
table td {
    
  /* Default text alignment */
  text-align: center;
  vertical-align: middle;

  /* Separate border */
  border: 2px solid white;
  border-top: 0;
  border-bottom: 0;
  padding: 2px;
}

/* Header */
table th {
  background: #0093DD;
  color: white;
}

/* Footer */
table tfoot::before {
  content: '';
  display: block;
  height: 8px;
}

table tfoot td:first-child {
  text-align: left;
  padding-left: 16px;
}

table tfoot td:last-child {
  text-align: right;
  padding-right: 16px;
}

/* Alternate line colors */
table tbody tr:nth-child(even) td {
  background: #EFEFEF;
}


/* Description column left aligned */
table tbody td:nth-child(2) {
  text-align: left;
}

/* Columns width */
table tbody td:nth-child(1),
table tbody td:nth-child(5) {
  width: 90px;
}

table tbody td:nth-child(2) {
  width: auto;
}

table tbody td:nth-child(3) {
  width: 90px;
}

table tbody td:nth-child(4) {
  width: 160px;
}

table td {
    position:relative;
}

table td a {
    margin: 0px 20px;
}

/* Image vertically aligned */
table tbody img {
  position:absolute;
    left: 5px;
    top: 50%;
    margin-top:-5px; /* half image... */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>SKU</th>
      <th>Description</th>
      <th>Availability</th>
      <th>Location</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img title="Out of stock" src="data:image/gif;base64,R0lGODlhDAAMAMQAAPcGB3lxgOzNz4pjcL59hMwrMcIzOvrv7/ELDYtpdaJOWY5fbL43Pp9RXP8AAIBseptVYO0QEo9odMgvNfAMDvUJCvoFBYxhbr5+hXhyge3P0c8pLsUyOPvv7/MLDAAAACH5BAEHAAcALAAAAAAMAAwAAAVM4CFiUhBImCgKybIhEXclgpgoTp5bTXIQg4pORxmQCsMhQ5IBJIkm4dNBOU2mDgPqYnl6HoRDokEZeiC+A2tgoFAMj4RGdSCZJGFRCAA7">
        <a href="">4000.4</a>
      </td>
      <td>Lemon soda</td>
      <td>10/10/2021</td>
      <td>London, United Kingdom</td>
      <td>Waiting</td>
    </tr>
    <tr>
      <td>
        <img title="In stock" src="data:image/gif;base64,R0lGODlhDAAMAMQAAAD/AGmLdc3sz1GfXH2+hCnPLjPCOu/67wn1CnF5gDe+PmGMbk6iWVWbYAX6BWyAel+ObAzwDmiPdC/INRDtEgrxDAb3B2OKcH6+hc/t0SvMMTLFOO/773J4gQvzDAAAACH5BAEHABwALAAAAAAMAAwAAAVNIMcdmJQkEnaInBBARUVtSyCMAQPsuzMEB8IFweNFLiVNsaiQdCxL44kYBURQkyrAkFo4op4H4RAYRIqeBrAVuBgiEcMjkGGRTKixKAQAOw==">
        <a href="">3000.3</a>
       </td>
      <td>Orange juice</td>
      <td>12/11/2021</td>
      <td>Paris, France</td>
      <td>Shipped</td>
    </tr>
    <tr>
      <td>
        <a href="">2000.2</a>
       </td>
      <td>An unknown long product to drink when you would like</td>
      <td>09/11/2021</td>
      <td>Berlin, Germany</td>
      <td>Waiting</td>
    </tr>
    <tr>
      <td>
        <img title="Out of stock" src="data:image/gif;base64,R0lGODlhDAAMAMQAAPcGB3lxgOzNz4pjcL59hMwrMcIzOvrv7/ELDYtpdaJOWY5fbL43Pp9RXP8AAIBseptVYO0QEo9odMgvNfAMDvUJCvoFBYxhbr5+hXhyge3P0c8pLsUyOPvv7/MLDAAAACH5BAEHAAcALAAAAAAMAAwAAAVM4CFiUhBImCgKybIhEXclgpgoTp5bTXIQg4pORxmQCsMhQ5IBJIkm4dNBOU2mDgPqYnl6HoRDokEZeiC+A2tgoFAMj4RGdSCZJGFRCAA7">
        <a href="">1000.1</a>
      </td>
      <td>Pineapple juice 500 ml</td>
      <td>24/12/2021</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
    </tr>
    <tr>
      <td>
        <img title="Out of stock" src="data:image/gif;base64,R0lGODlhDAAMAMQAAPcGB3lxgOzNz4pjcL59hMwrMcIzOvrv7/ELDYtpdaJOWY5fbL43Pp9RXP8AAIBseptVYO0QEo9odMgvNfAMDvUJCvoFBYxhbr5+hXhyge3P0c8pLsUyOPvv7/MLDAAAACH5BAEHAAcALAAAAAAMAAwAAAVM4CFiUhBImCgKybIhEXclgpgoTp5bTXIQg4pORxmQCsMhQ5IBJIkm4dNBOU2mDgPqYnl6HoRDokEZeiC+A2tgoFAMj4RGdSCZJGFRCAA7">
        <a href="">1001.5</a>
      </td>
      <td>This product doesn't have any icon and should use all the space</td>
      <td>03/12/2021</td>
      <td>&mdash;</td>
      <td>Waiting</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><a href="">&lt; Prev</a></td>
      <td colspan="3">Products 1-5 of 2124</td>
      <td><a href="">Next &gt;</a></td>
    </tr>
  </tfoot>
</table>