I've having a hard time aligning titles of each image at the bottom of the box. Please see the attached image. Here's my code:
Btw, I'm using Joomla.

Box code:

```
margin: auto;
align-self: center;
height:100px;
width:50%;
margin-top:0.5%;
margin-bottom:0.5%;
border: solid;

```

Image code:

```
margin-right:45%;
margin-left:45%;
margin-top:1%;

```

and title code:

```
display: block;
text-align: center;
position: absolute;
width: 50%;

```

This is my HTML code:

```
<ul class="nav menu navVerticalView nav-pills">

<li class="item-146"><a href="/1" ><img src="/images/companies/comm/virgin.png" alt="1" /><span class="image-title">1</span></a></li><li class="item-147"><a href="/2" ><img src="/images/companies/banks/JPMorganChase.jpg" alt="2sdfgfsdgesdfg" /><span class="image-title">2sdfgfsdgesdfg</span></a></li><li class="item-148"><a href="/3" ><img src="/images/companies/comm/stc.png" alt="3cvbgfbnfghnf" /><span class="image-title">3cvbgfbnfghnf</span></a></li><li class="item-149"><a href="/4" ><img src="/images/companies/comm/virgin.png" alt="4" /><span class="image-title">4</span></a></li><li class="item-150"><a href="/5" ><img src="/images/companies/comm/virgin.png" alt="5fghfghfg hfghrfghfgh " /><span class="image-title">5fghfghfg hfghrfghfgh </span></a></li><li class="item-151"><a href="/6" ><img src="/images/companies/educational/13.png" alt="6" /><span class="image-title">6</span></a></li><li class="item-152"><a href="/7" ><img src="/images/companies/banks/BankMuscat.jpg" alt="7bhjm hjmk,hj, hj, hj mjmgjjghjfh jfh hf hdgfhhdfghgfh fg hfgh fh" /><span class="image-title">7bhjm hjmk,hj, hj, hj mjmgjjghjfh jfh hf hdgfhhdfghgfh fg hfgh fh</span></a></li><li class="item-153"><a href="/8" ><img src="/images/companies/banks/JPMorganChase.jpg" alt="8ghujghjtghj tgjtghjtyg tyjtyjtyj" /><span class="image-title">8ghujghjtghj tgjtghjtyg tyjtyjtyj</span></a></li></ul>      </div>

```

I tried to use bottom: 0px; for the title but all titles would gather above each other. I also tried vertical-align:bottom; but it doesn't work. I tried so many different ways but no luck. If someone can give heads up so I can move on towards, I'll be appreciative.
Thank you,

[Image titles are not aligned with the bottom of the box](https://i.stack.imgur.com/Ge1mA.jpg)