Relative and absolute bottom left aligned

Question

Parent div is not aligned on the bottom edge of the image. I know that I can add a padding but this is not the solution if you have dynamic resize.

You can see how it's behave on the image

_{(source: imggmi.com)}

https://jsfiddle.net/x5243ykv/

.avatar-image {
  position: relative;
  text-align: left;
  color: white;
}

.botoom-menu {
  bottom: 0px;
  left: 0px;
  height: 30px;
  width: 100px;
  background-color: rgb(29, 228, 62);
  opacity: 1;
  position: absolute;
}

<div class="avatar-image">
  <img src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Himmelsblau.jpg" width="300px" height="300px" alt="tttt" />
  <div class="botoom-menu" /> tests
</div>

How to align it correctly?

score 1 · Accepted Answer · answered Aug 21 '19 at 14:19

Images are inline elements by default. This means that they behave just like other inline elements like text. Text needs a line-height, this means the image also needs an line-height. You can resolve this issue by setting line-height: 0; on the image but this doesn't really solve the root cause of the issue. Instead, set display: block; on the image to display it as block level element.

.avatar-image img {
  display: block;
}

score 0 · Answer 2 · answered Aug 21 '19 at 14:20

0

.avatar-image {
    position: relative;
    text-align: left;
    height: 300px;
    color: white;
}

Give the parent element a fixed size

answered Aug 21 '19 at 14:20

Lukas Baum

12
5

score 0 · Answer 3 · answered Aug 21 '19 at 14:23

simple add height:300px to .avatar-image class.

.avatar-image {
height:300px;  /* add this */

position: relative;
text-align: left;
color: white;
height:300px;
}

.botoom-menu {
bottom: 0px;
left: 0px;
height: 30px; 
width: 100px;
background-color: rgb(29, 228, 62);
opacity: 1;
position: absolute;
}

<div class="avatar-image"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Himmelsblau.jpg" width="300px" height="300px" alt="tttt" /> 
<div class="botoom-menu" /> tests </div>

Use can also inherit the size of the img from parent div.

.avatar-image img{
height:inherit;
}

.avatar-image {
height:300px;  /* add this */
position: relative;
text-align: left;
color: white;
height:300px;
}
.avatar-image img{
height:inherit;
}

.botoom-menu {
bottom: 0px;
left: 0px;
height: 30px; 
width: 100px;
background-color: rgb(29, 228, 62);
opacity: 1;
position: absolute;
}

<div class="avatar-image"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Himmelsblau.jpg" width="300px"  alt="tttt" /> 
<div class="botoom-menu" /> tests </div>

Relative and absolute bottom left aligned

3 Answers3