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

Question

我的 react-bootstrap table 中有一个 <td> img 元素，我想将其右对齐。目前，它被设置为在左侧文本之后有一个 10px 的 marginLeft（见图），但我希望所有 img 在 [=16] 中的单个“列”中保持一致=]，如果这是有道理的。在这种情况下，所有波峰或多或少会与 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/inline 样式中更改它？

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

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

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

Align Images To The Right Within a Table Data (td) Cell

css

jsx

reactjs

react-bootstrap