HTML-изображение в теге span выровняется как внизу

Question

У меня есть 2 изображения рядом, оба в своем теге. Одно изображение меньше другого, однако они оба «зацеплены» в верхней части своего ограничивающего родительского элемента (или внешнего элемента box, не знаю, как это сказать).

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

Но я бы хотел разместить второе меньшее изображение, выровненное внизу с другим изображением, а не сверху ... в настоящее время они выглядят так:

Однако я бы хотел, чтобы они были выровнены внизу, чтобы второе меньшее изображение находилось на том же уровне внизу с большим изображением

Edit: Извините, я забыл, они оба заключены в дополнительный тег из шаблона 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

Я узнал это сам ... Просто нужно было добавить несколько фрагментов вручную на первый:

 bottom: 0; top:5px;

, который добился цели и добавил немного запаса сверху .... каким-то образом не работали margin-top или padding-top ...

Answer 3

Вы пробовали это?

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