<a>居中對齊和</a><a><img></a><a>在左側，兩者都垂直居中在 a</a>

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. 在圖像的左側和右側有一個填充（通過增加列寬 - 現在固定為 90 像素 - 如果它太小而無法處理圖像和文本）

像這樣：

我寧願避免翻譯效果或 javascript 並堅持使用 HTML/CSS。

Answer 1

我不知道它是否滿足所有要求，但這是一個可能的解決方案。

要點：

table td {
    position:relative;
}

/* 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%; } 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; } /* Image vertically aligned */ table tbody img { position:absolute; left: 5px; top: 50%; margin-top:-5px; /* half image... */ }

 <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>

Answer 2

您可以使用以下情況行： Use position: absolute; 對於圖像（和position: relative對於該單元格）並將其垂直居中， top: 50%; 和transform: translateY(-50%); . 然后可以使用通常的方法使文本居中。 您唯一需要的是為該單元格設置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>