我想顯示一個左對齊的影像（左/右有一些填充）但在表格單元格中垂直居中，同時保持文本水平和垂直居中。
JSFiddle完整示例：
我想改為：
- 使文本以單元格為中心（水平和垂直），無論影像是否存在；我可以將影像作為
td背景，但我不想要，因為我希望該title屬性顯示為帶有更多資訊的工具提示 - 使影像垂直居中但左對齊
- 在影像左側有一個填充，在右側可能有一個填充（通過增加列寬 - 現在固定為 90px - 如果它太小而無法處理影像和文本）
像這樣：
我寧愿避免使用 javascript 而只堅持使用 HTML/CSS。
uj5u.com熱心網友回復：
您可以使用如下情況：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>uj5u.com熱心網友回復：
我不知道它是否滿足所有要求，但這是一個可能的解決方案。
要點：
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>—</td>
<td>—</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>—</td>
<td>Waiting</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><a href="">< Prev</a></td>
<td colspan="3">Products 1-5 of 2124</td>
<td><a href="">Next ></a></td>
</tr>
</tfoot>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/361299.html
標籤：html css html-table
上一篇：有沒有辦法把這些條放在圓圈后面？