이미지 안에 text 정렬

keyword

text 를 정렬시킬 부모 div에 position: absolute와 크기 지정

position: absolute;
width: 120px;
height: 120px;

text div 에는

position: absolute;
right: 0px;
bottom: 0px;

Code

.item_info_area {
  display: flex;
  margin-top: 20px;
  margin-left: 40px;
}

.img_area {
  display: flex;
  width: 140px;
  height: 160px;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  border: 2px solid #000;
  box-sizing: border-box;
  background: linear-gradient(#a9a9a9, #000000);

  img {
    width: 120px;
    height: 120px;
  }

  .img_text_area {
    position: absolute;
    width: 120px;
    height: 120px;
    .img_text {
      position: absolute;
      right: 0px;
      bottom: 0px;
    }
  }
}