span标记中的HTML图像都在底部对齐

Question

我的标签中有2张图像并排。一个图像比另一个图像小，但是，它们都被“钩住”了其边界父元素（或它们的外框元素，不确定该怎么说）的顶部。

<span style="position: relative; left: 0; top: 0;  vertical-align:top"><img src="/assets/images/xxxxx.png" class="xxxxx" alt="XXXXX"  height="30px" width="auto"/></span>

<span style="position: relative; left: 0; top: 0;"><img src="/assets/images/xx.png" class="xx" alt="xx"  height="45px" width="auto"/></span>

但是我想将第二个较小的图像与另一个图像（而不是顶部）在底部对齐...目前，它们看起来像这样：

但是，我希望它们在底部对齐，以便第二个较小的图像在底部与较大的图像处于同一水平

编辑： 抱歉，我忘了，它们都被Angular js“ ngx-admin”模板中的附加标记所包围。也许这与它有关系吗？

Answer 1

在第二个跨度中使用vertical-align:bottom"：-

<span style="position: relative; left: 0; top: 0;  vertical-align:top"><img src="/assets/images/xxxxx.png" class="xxxxx" alt="XXXXX"  height="30px" width="auto"/></span>

<span style="position: relative; left: 0; bottom: 0; vertical-align:bottom"><img src="/assets/images/xx.png" class="awsi-logo" alt="xx"  height="45px" width="auto"/></span>

Answer 2

您尝试过吗？

<span style="position: relative; left: 0; bottom: 0;"><img src="/assets/images/xx.png" class="awsi-logo" alt="xx"  height="45px" width="auto"/></span>

Answer 3

我自己发现了... 只需在第一个上添加一些手动代码段即可：

 bottom: 0; top:5px;

做到了这一点，并在顶部增加了一些边距。 不知何故，margin-top或padding-top也不起作用...