在表格数据 (td) 单元格内将图像右对齐答案

【问题标题】：Align Images To The Right Within a Table Data (td) Cell在表格数据 (td) 单元格内将图像右对齐
【发布时间】：2021-10-06 04:36:16
【问题描述】：

我的react-bootstrap 表中有一个<td> img 元素，我想向右对齐。目前，它设置为在左侧文本之后有一个 10px 的marginLeft（见图），但我希望所有imgs 在td 内的单个“列”中保持一致，如果这使得感觉。在这种情况下，所有波峰都或多或少与 Brighton 和 Hove Albion 齐平，因为它们是最长的弦。

这是我的代码：

                  <td>
                    <span>{convertTeamIdToName(data.teamId)}</span>
                    <span style={{ marginLeft: "10px" }}>
                      <img
                        src={retrieveTeamCrest(data.teamId)}
                        height="32"
                        width="32"
                        alt={data.teamName}
                      />
                    </span>
                  </td>

我将如何在 css/内联样式中进行更改？

【问题讨论】：

标签： css reactjs jsx react-bootstrap

【解决方案1】：

有很多方法可以做到这一点。您可以使用 flexbox 功能或为带有 td 元素填充的图像保留位置并绝对定位它们。这是一个选项，带有浮动（只是不要忘记将图像标签放在文本之前）：

table {
  width: 300px;
}

td {
  background-color: #ccc;
}

.team-logo {
  float: right;
  margin-left: 10px;
}

<table>
    <tr>
        <td>
            <span class="team-logo"><img src="http://placehold.it/32.jpg"></span>
            <span class="team-title">Lorem</span>
        </td>
    </tr>
    <tr>
        <td>
            <span class="team-logo"><img src="http://placehold.it/32.jpg"></span>
            <span class="team-title">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</span>
        </td>
    </tr>
    <tr>
        <td>
            <span class="team-logo"><img src="http://placehold.it/32.jpg"></span>
            <span class="team-title">Lorem</span>
        </td>
    </tr>
</table>

虽然我会在团队名称之前添加徽标 ;-)

【讨论】：