CSS Bottom Alignment

Question

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

Answer 1

Set the box to position relative, and the text on absolute. After that set the text to bottom 0.

.box {
  margin: auto;
  align-self: center;
  height:100px;
  width:50%;
  margin-top:0.5%;
  margin-bottom:0.5%;
  border: solid;
  position: relative;
}
.image {
  margin-right:45%;
  margin-left:45%;
  margin-top:1%;
  background: red;
  width: 30px;
  height: 30px;
}
.box p {
  display: block;
  text-align: center;
  position: absolute;
  bottom: 0;
  margin: 0;
}

<div class="box"><img class="image"><p>This is not how I would do it but okay 🤷🏼‍♀️</p></div>

Answer 2

You could use display: flex for this:

.example{
  display: flex;
  background-color: #808080;
  flex-flow: column;
  justify-content: space-between;
  
  height: 200px; /* for example purpose */
}

.top {
  background-color: #cecece;
}
.bottom {
  background-color: #cecece;
}

<div class="example">
  <div class="top">
    <span>This is the title</span>
  </div>
  
  <div class="bottom">
    <span>This is the title</span>
  </div>
</div>