在表数据 (td) 单元格中将图像向右对齐

如何解决在表数据 (td) 单元格中将图像向右对齐

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

这是我的代码：

td

我将如何在 css/内联样式中更改此设置？

解决方法

有很多方法可以做到这一点。您可以使用 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>

虽然我会在球队名称前加上标志 ;-)