左對齊文本，右對齊圖像，並在 a 內垂直居中

Question

正如標題所說，我有一個包含一些列的 HTML 表。 在其中一個width: auto的列中，我想顯示文本左對齊和圖像/圖標右對齊和浮動，因為圖像是可選的（即某些行可能沒有它，我希望文本在這種情況下使用<td>中的所有可用空間）。

這是 JSFiddle 示例： https://jsfiddle.net/4d8foL32/2/

基本上代碼是這樣的：

<tr>
  <td>4000.4</td>
  <td>Lemon soda<img src=""></td><!-- This is the line -->
  <td>10/10/2021</td>
  <td>London, United Kingdom</td>
  <td>Waiting</td>
</tr>

img {
  float: right;
  padding-right: 2px;
}

我想解決兩個問題：

1. 我希望圖像始終在行上垂直居中

   

2. 當減小瀏覽器 window 寬度（並因此減小表格寬度）時，文本不會在新行上拆分，使圖像保持在右側。

   

圖像應該在左側保留一個小填充，而不是文本上方的 go。 哪個是處理這個問題的最佳方法？

Answer 1

將 class 添加到相應的 td（假設 xyz）。 並為 class 添加一些 flex 屬性。

<td class="xyz">Lemon soda<img src=""></td>

.xyz { 
    display: flex; 
    align-items: center; 
    justify-content: space-between // or space-around (if you need some space);
}

注意：去除css中的img樣式，否則會影響解決方案。

Answer 2

作為解決方案，您可以使用position: absolute並使用transform: translateY()垂直對齊。 並在table tbody td:nth-child(2)中添加padding-right以為圖標創建額外空間。

table tbody td:nth-child(2) {
  text-align: left;
  padding-right: 2em; /* new line */
  position: relative; /* new line */
}

img {
  position: absolute; /* new line */
  right: 0; /* new line */
  top: 50%; /* new line */
  transform: translateY(-50%); /* new line */
  /* float: right; */
  padding-right: 2px;
}

 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%; } 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; padding-right: 2em; /* new line */ position: relative; /* new line */ } /* 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; } /* I would like the image to be right aligned inside the <td> and vertically centered */ img { position: absolute; /* new line */ right: 0; /* new line */ top: 50%; /* new line */ transform: translateY(-50%); /* new line */ /* float: right; */ padding-right: 2px; }

 <table> <thead> <tr> <th>SKU</th> <th>Description</th> <th>Availability</th> <th>Location</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>4000.4</td> <td> Lemon soda<img src="data:image/gif;base64,R0lGODlhEAAQANUAAA5TiDmd6nmDihZ2v057nStqmZSntR1djhyP52Sy7lRod9TX2RZzuhIoOYKftiiHz1es7WB+loqZpjGBvj1znDKZ6TBqlpCqvyxmkpqsulKCpkKi6yiV6GGCm5apt0Gh605/pGaEm4Wit5+wvY6cpz2f6y1plzWb6YOhtz5zmzNrlVis7UWj6zCBv////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAC4ALAAAAAAQABAAAAZoQJdwSCwKisIRQcMEWRRIl+GRqJ5YAAxyWk1MSA1OocjtphYSxHhY7pYok83alaF27wm5sI2vfkwuHnZ9VSsMFy4qhF0QDA5CIQGLjY9DERV9EAOVRJd3mpxFngmgUZYVpaZDHQcipkEAOw==" /> </td> <td>10/10/2021</td> <td>London, United Kingdom</td> <td>Waiting</td> </tr> <tr> <td>3000.3</td> <td> Orange juice<img src="data:image/gif;base64,R0lGODlhEAAQANUAAA5TiDmd6nmDihZ2v057nStqmZSntR1djhyP52Sy7lRod9TX2RZzuhIoOYKftiiHz1es7WB+loqZpjGBvj1znDKZ6TBqlpCqvyxmkpqsulKCpkKi6yiV6GGCm5apt0Gh605/pGaEm4Wit5+wvY6cpz2f6y1plzWb6YOhtz5zmzNrlVis7UWj6zCBv////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAC4ALAAAAAAQABAAAAZoQJdwSCwKisIRQcMEWRRIl+GRqJ5YAAxyWk1MSA1OocjtphYSxHhY7pYok83alaF27wm5sI2vfkwuHnZ9VSsMFy4qhF0QDA5CIQGLjY9DERV9EAOVRJd3mpxFngmgUZYVpaZDHQcipkEAOw==" /> </td> <td>12/11/2021</td> <td>Paris, France</td> <td>Shipped</td> </tr> <tr> <td>2000.2</td> <td> An unknown long product to drink when you would like<img src="data:image/gif;base64,R0lGODlhEAAQANUAAA5TiDmd6nmDihZ2v057nStqmZSntR1djhyP52Sy7lRod9TX2RZzuhIoOYKftiiHz1es7WB+loqZpjGBvj1znDKZ6TBqlpCqvyxmkpqsulKCpkKi6yiV6GGCm5apt0Gh605/pGaEm4Wit5+wvY6cpz2f6y1plzWb6YOhtz5zmzNrlVis7UWj6zCBv////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAC4ALAAAAAAQABAAAAZoQJdwSCwKisIRQcMEWRRIl+GRqJ5YAAxyWk1MSA1OocjtphYSxHhY7pYok83alaF27wm5sI2vfkwuHnZ9VSsMFy4qhF0QDA5CIQGLjY9DERV9EAOVRJd3mpxFngmgUZYVpaZDHQcipkEAOw==" /> </td> <td>09/11/2021</td> <td>Berlin, Germany</td> <td>Waiting</td> </tr> <tr> <td>1000.1</td> <td> Pineapple juice 500 ml<img src="data:image/gif;base64,R0lGODlhEAAQANUAAA5TiDmd6nmDihZ2v057nStqmZSntR1djhyP52Sy7lRod9TX2RZzuhIoOYKftiiHz1es7WB+loqZpjGBvj1znDKZ6TBqlpCqvyxmkpqsulKCpkKi6yiV6GGCm5apt0Gh605/pGaEm4Wit5+wvY6cpz2f6y1plzWb6YOhtz5zmzNrlVis7UWj6zCBv////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHAC4ALAAAAAAQABAAAAZoQJdwSCwKisIRQcMEWRRIl+GRqJ5YAAxyWk1MSA1OocjtphYSxHhY7pYok83alaF27wm5sI2vfkwuHnZ9VSsMFy4qhF0QDA5CIQGLjY9DERV9EAOVRJd3mpxFngmgUZYVpaZDHQcipkEAOw==" /> </td> <td>24/12/2021</td> <td>&mdash;</td> <td>&mdash;</td> </tr> <tr> <td>1001.5</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>