CSS Bottom Alignment

Question

Мне трудно выровнять заголовки каждого изображения в нижней части окна.Пожалуйста, смотрите прикрепленное изображение.Вот мой код: Кстати, я использую Joomla.

Код коробки:

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

Код изображения:

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

и код заголовка:

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

Это мой HTML-код:

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

Я пытался использовать bottom: 0px;для названия, но все названия будут собираться друг над другом.Я также попытался выровнять по вертикали: снизу;но это не работаетЯ пробовал так много разных способов, но не повезло.Если кто-то может поднять голову, чтобы я мог двигаться дальше, я буду благодарен.Спасибо,

Названия изображений не выровнены по нижней части окна

Answer 1

Вы можете использовать display: flex для этого:

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

Answer 2

Установите поле в положение относительное, а текст на абсолютное ... После этого установите текст на нижнее 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>