我想右對齊單元格中的影像，并且仍然保持文本在單元格中居中。我在正確顯示它的影像上使用 float:right ，但是它將文本向左推到影像的寬度，因此它不再居中。有沒有辦法讓文本居中？
<table>
<tr>
<td style="text-align:center" width:"100">text
<img src="~/images/pencil1.png" height="25" width="25" style="float: right;" />
</td>
</tr>
</table>
uj5u.com熱心網友回復：
您可以添加相對于 td 的位置并將絕對位置添加到影像，然后在影像中設定 righ=0
<table style="width:100%">
<tr>
<td style="text-align:center;position:relative">
text
<img src="~/images/pencil1.png" height="25" width="25" style="position:absolute;right:0" />
</td>
</tr>
</table>
另外，如果你想讓你的表格變成 100%，你必須在表格中設定樣式，而不是在單元格中。
請記住，您的文字可能位于影像下方。如果要避免這種情況或使用半透明影像，可以將文本放在影像上。
uj5u.com熱心網友回復：
我會用分配了 flex 的 div 來包裝你的文本和影像。然后你可以使用flex-grow: 1;.
td {
width:50%;
}
.tdflex {
display: flex;
}
.text {
flex-grow: 1;
text-align: center;
}<table border>
<tr>
<td>
<div class="tdflex">
<div class="text">text</div>
<div>
<img src="https://via.placeholder.com/500" height="25" width="25" />
</div>
</div>
</td>
</tr>
</table>更新
td {
width:200px;
height: 50px;
}
.tdpos {
position: relative;
}
.tdpos img {
position: absolute;
top:0;
right:0;
}
.text {
margin-top: -24px;
background: gray;
text-align: center;
}<table border>
<tr>
<td>
<div class="tdpos">
<div class="text">text</div>
<img src="https://via.placeholder.com/500" height="50" width="50" />
</div>
</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447914.html